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

Question

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

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

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

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

Нужно работать на Chrome, Safari, Firefox 3+, IE9 +.

Answer 1

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

element.oninput = function () {

}

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

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

Answer 2

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

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

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

Answer 3

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

Вывод выглядит так:

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

Сценарий использует window.setInterval (), чтобы избежать кросс-браузерных проблем (см. https://stackoverflow.com/a/1949416/727190).). Это приводит к пакетированию некоторых изменений, когда пользователь набирает очень быстро - это может быть хорошо, зависит от вашей ситуации.

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

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;
    }
}