Форум Сайтостроение Веб-строительство

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

Ufaweb
На сайте с 03.03.2008
Offline
182
Ufaweb
126

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

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

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

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


jpg untitled-1.jpg
jpg untitled-2.jpg
ArbNet
На сайте с 27.10.2019
Offline
125
ArbNet
#1 
<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>
Обсуждение разработки на моём фреймворке https://discord.gg/23N4s9x2kp
Ufaweb
На сайте с 03.03.2008
Offline
182
Ufaweb
#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>`

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

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