Как покрасить символы в строке?

Question

[LaCosteGreen]

Есть textarea. Есть input для ввода ограничителя количества символов. Если количество символов в тексте выходит за пределы ограничителя (например больше 10 символов в строке), то менять цвет выходящих за предел символов на красный. C textarea сделать ничего не удалось. Попробовал сделать . Но при срабатывании слушателя на input курсор перескакивает в начало и символы вводятся только сначала.. Как правильно сконкатенировать строки которые я в консоль получаю? Или может есть метод проще?

<input type="number" class="counter">
    <div class="symbols" contenteditable="true">12345abc</div>

const text = document.querySelector('.symbols')
        const counter = document.querySelector('.counter')
        text.addEventListener('input', () => {
            if (text.outerText.length > 9) {
                console.log(text.outerText.substring(0, 9)); //тут я получаю первые 9 символов
                console.log('Больше 9: ', text.outerText.substring(9)); // тут я получаю остальные символы
               
                text.innerHTML = text.outerText.substring(0, 9) + '<span style = "background: rgba(252, 100, 59, 0.4)">' +
                    text.outerText.substring(9, text.outerText.length) + '</span>' // не работает(
            }

        })

Comments

[IvanU7n]

с выделением может помочь CSS Custom Highlight API, если браузерная поддержка позволяет, ну а с выделением в contenteditable ЕМНИП нужно работать через Selection

Answer 1

[shsv382]

Я нашел следующее решение (спойлер - грязный хак с добавлением прозрачного div с двумя span):

<input type="number" class="counter" />
  <div class="symbols-wrapper">
    <div class="symbols-hidden"></div>
    <div class="symbols" contenteditable="true">12345abc</div>
  </div>

.symbols-wrapper {
  position: relative;
  width: 220px;
  height: 120px;
}

.symbols {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.symbols-hidden {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: transparent;
}

.symbols, .symbols-hidden {
  border: none;
  padding: 2px;
  width: 220px;
  height: 120px;
}

const text = document.querySelector('.symbols')
const hiddenText = document.querySelector('.symbols-hidden')

text.addEventListener('input', () => {
  const counter = document.querySelector('.counter');

  // сохраняем текст разрешенной длины
  let validText = text.outerText.substring(0, Number(counter.value))

  // сохраняем остальной текст
  let invalidText = text.outerText.substring(Number(counter.value));

  // обнуляем красный span
  hiddenText.innerHTML = ""

  // добавляем белый span
  let span1 = document.createElement('span');
  span1.style.background = "";
  span1.innerHTML = validText;

  // если длина больше указанной в ограничителе, то добавляем красный span
  if (invalidText.length > 0) {
    let span2 = document.createElement('span');
    span2.style.background = "rgba(252, 100, 59, 0.4)";
    span2.innerHTML = invalidText;
    hiddenText.innerHTML = span1.outerHTML + span2.outerHTML;
  } else {
    hiddenText.innerHTML = span1.outerHTML;
  }
  
})