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

Ufaweb
На сайте с 03.03.2008
Offline
169
108

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

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

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

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


jpg untitled-1.jpg
jpg untitled-2.jpg
ArbNet
На сайте с 27.10.2019
Offline
69
#1
<style>
    #divinput {
      width: 440px;
      overflow: hidden;
      border: 1px solid;
      white-space: nowrap;
      border-radius: 0.5em;
      display: inline-block;
    }
#divinput span {
      padding0.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
На сайте с 03.03.2008
Offline
169
#2
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>`

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий