Изменение цвета у первых 2х символов значения в input

Question

Существует input в который можно вводить символы.

Как в момент события oninput менять цвет первых 2х введенных символов, например, на красный цвет, при том что остальные остаются черными?

Допустим я беру 2 символа методом .slice(0, 2), как для них поменять цвет .css({'color':'red'})?

Answer 1

Можно воспользоваться "грязным трюком", сделав поле input невидимым, прикрыв его сверху элементом span:

const input = document.querySelector("input")
const span = document.querySelector("span")

input.addEventListener("keydown", event => {
    const value = event.target.value
  span.innerHTML = `<span class="color">${value.substring(0, 2)}</span><span>${value.substring(3)}</span>`
}, false)

div {
  position: relative;
  border: 1px solid;
}

input {
  opacity: 0;
  width: 100%;
}

.input-span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.color {
  color: red;
}

<div>
  <input type="text">
  <span class="input-span"></span>
</div>

Здесь еще не хватает эмулящии работы каретки, но думаю основную идею Вы сможете уловить из данного наброска.

БЛОГ НА HUSL

Изменение цвета у первых 2х символов значения в input

Ответы (1 шт):