Как сделать частично статичный текст в input?

Question

[Володимир Паламар]

Есть чекбоксы с названием стран при нажатии на которые в input через запятую они добавляются
и надо сделать так, чтобы пользователь мог вручную добавлять свой текст, но при попытке удалить существующий у него ничего не получалось

<input type="text" class="form-control" id="f15" value={ abroaddata.abroaddeftext + abroaddata.abroadtext } on:keyup={abroadTextFilter}>

let abroaddata = {
    abroaddeftext:"inostranstvo",
    abroadtext:""
}
function abroadTextFilter(e) {
    console.log(e)

    if (e.key) {
        if (!abroaddata.abroadtext.trim().length) {
            abroaddata.abroadtext = e.data==","?", ":" "+e.data
        }else{
            abroaddata.abroadtext += e.data
        }
    }else{
        console.log(abroaddata.abroadtext)
        if (abroaddata.abroadtext.trim().length<1) {
            abroaddata.abroadtext += " "
        }else{
            abroaddata.abroadtext = abroaddata.abroadtext.slice(0, -1)
        }

    }
}

Этот код на телефоне отказывается работать и вместо удаления дублирует уже существующий текст

Кто знает как быть?

Comments

[Володимир Паламар]

TheAndrey7, Не понимаю вопроса, что вы имеете в виду?

[Володимир Паламар]

TheAndrey7, Chrome

Answer 1

[Володимир Паламар]

<input type="text" class="form-control" id="f15" value={abroaddata.abroaddeftext + abroaddata.abroadtext} on:input={abroadTextFilter}>

let abroaddata = {
    inostr:true,
    hrv:false,
    bih:false,
    srb:false,
    alb:false,
    abroaddeftext:"inostranstvo",
    abroadtext:""
}
function abroadTextFilter(e) {
    let indx = e.target.value.indexOf(abroaddata.abroaddeftext)
    if (indx !== 0) {
        e.target.value = abroaddata.abroaddeftext
        return;
    }
    abroaddata.abroadtext = e.target.value.slice(abroaddata.abroaddeftext.length)
}

Подсмотрел здесь

Антон Шаманов

никак не сделать

Доказал обратное)

dollar

чем сложнее хотелка, тем хитрее решение.

Но в конце концов получилось банально просто)

Comments

[Антон Шаманов]

Доказал обратное)

какая-то хренотень - где тут чекбоксы то? булевы значения в abroaddata никак не используются

[Володимир Паламар]

Антон Шаманов,

<div class="d-flex flex-wrap justify-content-around">
                                  
                                        <div class="form-check interest-check">
                                            <input class="form-check-input" type="checkbox" id="f10" bind:checked={abroaddata.inostr} on:change={abroadchange("inostr")}>
                                            <label class="form-check-label rounded-m" for="f10">Inostranstvo</label>
                                            <i class="fa fa-check-circle color-white font-18"></i>
                                            <i class="fa fa-earth-europe font-17 color-highlight"></i>
                                        </div>
                                        <div class="form-check interest-check">
                                            <input class="form-check-input" type="checkbox" id="f11" bind:checked={abroaddata.hrv} on:change={abroadchange("hrv")}>
                                            <label class="form-check-label rounded-m" for="f11">Hrvatska</label>
                                            <i class="fa fa-check-circle color-white font-18"></i>
                                            <i class="fa fa-store font-17 color-dark-dark"></i>
                                        </div>
                                        <div class="form-check interest-check">
                                            <input class="form-check-input" type="checkbox" id="f12" bind:checked={abroaddata.bih} on:change={abroadchange("bih")}>
                                            <label class="form-check-label rounded-m" for="f12">BiH</label>
                                            <i class="fa fa-check-circle color-white font-18"></i>
                                            <i class="fa fa-mountains font-17 color-green-dark"></i>
                                        </div>
                                        <div class="form-check interest-check">
                                            <input class="form-check-input" type="checkbox" id="f13" bind:checked={abroaddata.srb} on:change={abroadchange("srb")}>
                                            <label class="form-check-label rounded-m" for="f13">Srbija</label>
                                            <i class="fa fa-check-circle color-white font-18"></i>
                                            <i class="fa fa-dolly font-17 color-teal-dark"></i>
                                        </div>
                                        <div class="form-check interest-check">
                                            <input class="form-check-input" type="checkbox" id="f14" bind:checked={abroaddata.alb} on:change={abroadchange("alb")}>
                                            <label class="form-check-label rounded-m" for="f14">Albanija</label>
                                            <i class="fa fa-check-circle color-white font-18"></i>
                                            <i class="fa fa-star-and-crescent font-17 color-red-dark"></i>
                                        </div>
                                    </div>

function abroadchange(field) {
    return ()=>{
        if ( field == "hrv" || field == "bih" || field == "srb" || field == "alb" ) {
            if (abroaddata.inostr) {
                abroaddata.inostr = false
            }
            
        }else{
            abroaddata.hrv = abroaddata.bih = abroaddata.srb = abroaddata.alb = false
        }
        abroadchangeText()
    }
}
function abroadchangeText() {
    
    if (abroaddata.inostr) {
        abroaddata.abroaddeftext = "inostranstvo"
    } else {
        abroaddata.abroaddeftext = ""
        if (abroaddata.hrv) {
            abroaddata.abroaddeftext += "Hrvatsku"
        }
        if (abroaddata.bih) {
            abroaddata.abroaddeftext += (abroaddata.abroaddeftext.length>0?", ":"")+"Bosnu i Hercegovinu"
        }
        if (abroaddata.srb) {
            abroaddata.abroaddeftext += (abroaddata.abroaddeftext.length>0?", ":"")+"Srbiju"
        }
        if (abroaddata.alb) {
            abroaddata.abroaddeftext += (abroaddata.abroaddeftext.length>0?", ":"")+"Albaniju"
        }
    }
}

Answer 2

[dollar]

<input type="text" disabled>

input1.disabled = true;

Comments

[Володимир Паламар]

? Ну у пользователя пропадет возможность писать... Но мне нужно чтобы он писал, но текст который добавлен программно он был не в состоянии удалить

[dollar]

Володимир Паламар, чем сложнее хотелка, тем хитрее решение.
Скорее всего, придётся мудрить, делать второй input, либо элемент с наложением на input, либо вообще реализовать свой input через canvas и т.д. и т.п.

Но это уже больше смахивает на полноценную задачу, то есть выходит за рамки вопроса. Поэтому формальный ответ будет: по-простому никак не сделать.

Answer 3

[Антон Шаманов]

никак не сделать - ты не можешь определить положение курсора в input. поэтому просто делаешь чекбоксы + поле для произвольных значений и выводишь результат в <input type="text" disabled>