Виявлення обміну текстовими зонами

Як я можу виявити подію зміни на textarea за допомогою JavaScript?
Я намагаюся виявити, скільки символів залишилось під час введення.

Я спробував використовувати подію onchange, але це, здається, розпочинає лише тоді, коли фокус знаходиться поза.

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

Дивіться мою відповідь про те, як накласти максимальну довжину 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/

EDIT: Здається, навіть вищезазначене рішення не є ідеальним, як справедливо вказувалося в коментарях: наявність addEventListenerвластивості в textarea не означає, що ви працюєте з розумним браузером; аналогічно наявність attachEventвластивості не означає IE. Якщо ви хочете, щоб ваш код був справді повітронепроникним, вам варто змінити це. Дивіться коментар Тіма Дауна для покажчиків.

• Для Google-Chrome вхідний вхід буде достатнім (випробувано в Windows 7 з версією 22.0.1229.94 м).
• Для IE 9 oninput буде захоплювати все, крім вирізаного через контекстне меню та зворотній простір.
• Для IE 8 необхідна зміна властивостей для ловлі вставлення на додаток до входу.
• Для IE 9 + 8 потрібно ввімкнути підключення ключа, щоб увімкнути резервну область.
• Для 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...
    });

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

(() => {
	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>

Клавіатури має бути достатньо, якщо вона поєднана з атрибутом перевірки вводу 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);