Обнаружение изменения текстовой области

Как определить событие изменения в текстовом поле с помощью javascript?
Я пытаюсь определить, сколько символов осталось при вводе.

Я пробовал использовать событие onchange, но, похоже, это срабатывает только тогда, когда фокус отсутствует.

Вам нужно будет использовать onkeyup и onchange для этого. Onchange предотвратит вставку контекстного меню, и onkeyup будет срабатывать при каждом нажатии клавиши.

См. Мой ответ о том, как установить maxlength на textArea для примера кода.

Это 2012 год, наступила эра пост-ПК, и нам все еще приходится бороться с чем-то столь же простым, как это. Это должно быть очень просто .

До тех пор , пока эта мечта исполняется, вот лучший способ сделать это, кросс-браузер: используйте комбинацию из inputи onpropertychangeсобытий , как так:

var area = container.querySelector('textarea');
if (area.addEventListener) {
  area.addEventListener('input', function() {
    // event handling code for sane browsers
  }, false);
} else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    // IE-specific event handling code
  });
}

inputМероприятие берет на IE9 +, FF, Chrome, Opera и Safari , и onpropertychangeзаботится о IE8 (он также работает с IE6 и 7, но есть некоторые ошибки).

Преимущество использования inputи в onpropertychangeтом, что они не срабатывают без необходимости (например, при нажатии клавиш Ctrlили Shift); так что, если вы хотите запустить относительно дорогостоящую операцию при изменении содержимого текстового поля, это правильный путь .

Теперь IE, как всегда, поддерживает это наполовину: в IE inputне onpropertychangeсрабатывают, когда символы удаляются из текстового поля. Поэтому, если вам нужно обработать удаление символов в IE, используйте keypress(в отличие от использования keyup/ keydown, потому что они срабатывают только один раз, даже если пользователь нажимает и удерживает клавишу).

Источник: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

РЕДАКТИРОВАТЬ: Кажется, что даже вышеуказанное решение не идеально, как правильно указано в комментариях: наличие addEventListenerсвойства в текстовом поле не означает, что вы работаете с нормальным браузером; аналогично наличие attachEventсвойства не подразумевает IE. Если вы хотите, чтобы ваш код был действительно герметичным, вам следует подумать об изменении этого. См . Комментарий Тима Дауна для указателей.

• Для Google-Chrome достаточно oninput (проверено в Windows 7 с версией 22.0.1229.94 m).
• Для IE 9 oninput поймает все, кроме вырезания через контекстное меню и backspace.
• Для IE 8 требуется onpropertychange для перехвата вставки в дополнение к oninput.
• Для IE 9 + 8 требуется onkeyup для захвата backspace.
• Для IE 9 + 8 onmousemove - единственный способ поймать резку через контекстное меню.

Не тестировалось в Firefox.

    var isIE = /*@cc_on!@*/false; // Note: This line breaks closure compiler...

    function SuperDuperFunction() {
        // DoSomething
    }


    function SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally() {
        if(isIE) // For Chrome, oninput works as expected
            SuperDuperFunction();
    }

<textarea id="taSource"
          class="taSplitted"
          rows="4"
          cols="50"
          oninput="SuperDuperFunction();"
          onpropertychange="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onmousemove="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onkeyup="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();">
Test
</textarea>

Я знаю, что это не совсем ваш вопрос, но я подумал, что это может быть полезно. Для некоторых приложений хорошо, чтобы функция изменения срабатывала не каждый раз при нажатии клавиши. Этого можно добиться примерно так:

var text = document.createElement('textarea');
text.rows = 10;
text.cols = 40;
document.body.appendChild(text);

text.onkeyup = function(){
var callcount = 0;
    var action = function(){
        alert('changed');
    }
    var delayAction = function(action, time){
        var expectcallcount = callcount;
        var delay = function(){
            if(callcount == expectcallcount){
                action();
            }
        }
        setTimeout(delay, time);
    }
    return function(eventtrigger){
        ++callcount;
        delayAction(action, 1200);
    }
}();

Это работает путем проверки того, возникло ли более недавнее событие в течение определенного периода задержки. Удачи!

Я знаю, что этот вопрос был специфичен для JavaScript, однако, похоже, нет хорошего, чистого способа ВСЕГДА определять, когда текстовое поле изменяется во всех текущих браузерах. Я узнал, что jquery позаботился об этом за нас. Он даже обрабатывает изменения контекстного меню в текстовых областях. Один и тот же синтаксис используется независимо от типа ввода.

    $('div.lawyerList').on('change','textarea',function(){
      // Change occurred so count chars...
    });

или

    $('textarea').on('change',function(){
      // Change occurred so count chars...
    });

Вы можете прослушивать событие при изменении текстового поля и вносить изменения по своему усмотрению. Вот один пример.

(() => {
	const textArea = document.getElementById('my_text_area');
  textArea.addEventListener('input', () => {
    let textLn =  textArea.value.length;
    if(textLn >= 100) {
      textArea.style.fontSize = '10pt';
    }

  })
})()

<html>
<textarea id='my_text_area' rows="4" cols="50" style="font-size:40pt">
This text will change font after 100.
</textarea>
</html>

Keyup должно хватить, если в паре с атрибутом проверки / шаблона ввода HTML5. Итак, создайте шаблон (регулярное выражение) для проверки ввода и воздействия на статус .checkValidity (). Что-то вроде ниже может сработать. В вашем случае вам нужно, чтобы регулярное выражение соответствовало длине. Мое решение используется / доступно для демонстрации онлайн здесь .

<input type="text" pattern="[a-zA-Z]+" id="my-input">

var myInput = document.getElementById = "my-input";

myInput.addEventListener("keyup", function(){
  if(!this.checkValidity() || !this.value){
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

Код, который я использовал для IE 11 без jquery и только для одного текстового поля:

Javascript:

// Impede que o comentário tenha mais de num_max caracteres
var internalChange= 0; // important, prevent reenter
function limit_char(max)
{ 
    if (internalChange == 1)
    {
        internalChange= 0;
        return;
    }
    internalChange= 1;
    // <form> and <textarea> are the ID's of your form and textarea objects
    <form>.<textarea>.value= <form>.<textarea>.value.substring(0,max);
}

и HTML:

<TEXTAREA onpropertychange='limit_char(5)' ...

Попробуй это. Это просто, и с 2016 года я уверен, что он будет работать в большинстве браузеров.

<textarea id="text" cols="50" rows="5" onkeyup="check()" maxlength="15"></textarea> 
<div><span id="spn"></span> characters left</div>

function check(){
    var string = document.getElementById("url").value
    var left = 15 - string.length;
    document.getElementById("spn").innerHTML = left;
}

Лучшее, что вы можете сделать, - это настроить функцию, которая будет вызываться в течение определенного времени, и эту функцию для проверки содержимого вашего текстового поля.

self.setInterval('checkTextAreaValue()', 50);