Я хочу изменить цвет фона для символов в текстовом поле после того, как символы в текстовой области более 150 символов

Question

Я использую event.data, чтобы получить текст, который набираю в этом HTML текстовом поле , и я хочу покрасить фон в красный, но стиль атрибута на event.data давая мне ошибку. Я не пользуюсь jQuery.

textarea.addEventListener('input', function( event ) {
    if( length > maxLength ) {
        console.log(event.data);
    }
    // ...
}

Мне понадобится что-то вроде этого .

Спасибо за вашу помощь.

Answer 1

let input = document.getElementById('input');
input.addEventListener( 'keyup', event => {
  if( event.target.value.length > 150 )
    console.log('text is >150 chars')
});

<textarea id='input'>

</textarea>

Если вы хотите выделить текст, я не думаю, что вы можете сделать это в текстовой области. По крайней мере, не без выбора текста.

PS: использование contenteditable на элементе может позволить работать подобному поведению, но я бы не рекомендовал его; у вас будут неформальные элементы в вашей форме.

Answer 2

Если вы введете больше, чем хотите, цвет текста станет красным, пожалуйста, укажите это, если не хотите объяснить.

function h() {    // this function will be invoced by oninput from the textbox
   if ( length > maxLength ){
      consol.log(event.data);  
      document.getElementById('your textbox id').style.color = "red";
   }

}

Answer 3

У меня есть то, что я хочу, спасибо

function handleRedBackground () {var cointainer = document.getElementById ("red-background"); var para = container.children [0]; var transparent = String (textarea.value) .slice (0, tweetLength); var selected = String (textarea.value) .slice (tweetLength);

container.height = textarea.offSetHeight; para.style.top = (-1 * parseInt (textarea.scrollTop)) + "px";

para.inner HTML = "" + transparent + "" + выделено + " "; }

Answer 4

Я предлагаю вам использовать атрибут maxlength , чтобы они просто не могли использовать больше 150 символов

<textarea maxlength="150"></textarea>

, если им удалось вставить более 150 символов по какой-то причине вы можете использовать : недействительно псевдокласс

:invalid {
  background-color: red;
}