Точная позиция N-ного символа в input type=text

Ufaweb

16 декабря 2020, 18:39

111

Доброго времени суток!

Возможно ли посредством js/jquery высчитать реальную позицию 50-го символа в инпуте с целью последующей заливки фона? Пример того, как я хочу сделать, в прикреплении.

Может быть кто-то где-то натыкался на похожее решение?

Устроит даже не заливка, а смена цвета текста, но как это делается — ума не приложу. Спасибо!

jpg

untitled-1.jpg

jpg

untitled-2.jpg

ArbNet

16 декабря 2020, 19:28

<style>
    #divinput {
      width: 440px;
      overflow: hidden;
      border: 1px solid;
      white-space: nowrap;
      border-radius: 0.5em;
      display: inline-block;
    }
    #divinput span {
      padding: 0.25em 0;
    }
    .color1 {
      background-color: green;
    }
    .color2 {
      background-color: red;
    }
</style>
    
<div id="divinput" contenteditable>
        123456789012345678901234567890123456789012345678901234567890
</div>
    
<script>
        let t1=divinput.innerText.substr(0,50), t2=divinput.innerText.substr(50);
        divinput.innerHTML=`<span class="color1">${t1}</span><span class="color2">${t2}</span>`
</script>

Ufaweb

16 декабря 2020, 20:53

ArbNet #:
let t1=divinput.innerText.substr(0,50), t2=divinput.innerText.substr(50);
divinput.innerHTML=`<span class=«color1»>${t1}</span><span class=«color2»>${t2}</span>`

Спасибо! Скрипт работает, но каретка всегда вначале строки, и символы печатаются справа-налево.

Похожие записи:

Добавить комментарий Отменить ответ