Подтвердить что ты не робот

<ввод> события изменения текста

Есть ли библиотека, которая может извлекать все текстовые события из элемента <input type=text> (или contentEditable - любое однострочное поле ввода)?

В частности, мне нужно знать, когда текст изменяется:

  • ввод (asdf, backspace)
  • вырезать/вставить
  • сочетания клавиш (например, ctrl + bksp или опция + bksp удаляет предыдущее слово)
  • перетаскиваемый текст
  • редактировать действия меню

И желательно, что это было изменено (был ли и какой текст вставлен, удален или заменен).

Необходимо работать с Chrome, Safari, Firefox 3+, IE9 +.

4b9b3361

ОТВЕТЫ

Ответ 1

Событие HTML5 oninput поддерживается всеми этими браузерами и очень похоже на событие onchange, но срабатывает, как только изменяется вход элемента. Он также пузырится, поэтому вы можете захватить его дальше по дереву документов.

element.oninput = function () {

}

Рабочая демонстрация: http://jsfiddle.net/Zfthe/

http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript

Ответ 2

У меня была аналогичная проблема вчера и придумал решение для сравнения старых и новых значений ввода текста.

Вывод выглядит следующим образом:

Старое значение: тестовый тест
Новое значение: test w
Изменить: перезапись 'test' с 'w' в позиции 5

script использует window.setInterval(), чтобы избежать проблем с перекрестным браузером (см. fooobar.com/questions/19951/...). Это приводит к тому, что некоторые изменения должны быть собраны, когда пользователь набирает очень быстро - это может быть хорошей вещью, зависит от вашей ситуации.

Однако вы можете легко изменить script для выключения событий.

http://jsfiddle.net/6zp48/2/

Выдержка из скрипта, показывающая результат diff (код findChange() слишком длинный, чтобы вставить здесь):

var changeType = { added: 0, deleted: 1, overwrite: 2 };
var previousValue = '';

window.setInterval(checkChange, 100);

function checkChange() {
    var newValue = $("#input1").val();
    if(newValue != previousValue) {
        showChange(findChange(previousValue, newValue));
        previousValue = newValue;
    }
}

function showChange(result) {
    $("#last-change").html("Prev: " + previousValue + "<br/>Next:" + $("#input1").val() + "<br/>");

    if(result == null)  {
        $("#last-change").html($("#last-change").html() + " no change detected");
        return;
    }

    switch (result.change) {
        case changeType.added:
            $("#last-change").html($("#last-change").html() + "added '" + result.added.text + "' at position " + result.added.position + "<br />");
            break;
        case changeType.deleted:
            $("#last-change").html($("#last-change").html() + "deleted '" + result.lost.text + "' at position " + result.lost.position + "<br />");
            break;
        case changeType.overwrite:
            $("#last-change").html($("#last-change").html() + "overwrote '" + result.lost.text + "' with '" + result.added.text + "' at position " + result.added.position + "<br />");
            break;
    }
}

Ответ 3

Короткий ответ

$('input').on('keydown keyup click input submit mouseenter', function (e) {
    // Handle e.type
    alert('Type: ' + e.type);
});

Добавляйте поддерживаемые или настраиваемые события, они должны работать. Я надеюсь, что это помогает кому-то Подробнее см. В документации JQuery. http://api.jquery.com/on/