<input> text change events

问题:

Is there a library that can extract all text events from an <input type=text> (or contentEditable -- any one-line input field) element?

In particular, I need to know whenever the text is changed by:

• typing (asdf, backspace)
• cut/paste
• key combo actions (e.g. ctrl+bksp or option+bksp deletes the previous word)
• dragged & dropped text
• edit menu actions

And preferably what it was that changed (whether and what text was inserted, deleted, or replaced).

Needs to work on Chrome, Safari, Firefox 3+, IE9+.

回答1:

The HTML5 oninput event is supported by all those browsers and works very much like the onchange event, but fires as soon as the element's input changes. It also bubbles, so you can capture it further up the document tree.

element.oninput = function () {

}

Working demo: http://jsfiddle.net/Zfthe/

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

回答2:

I had a similar problem yesterday and came up with a solution to diff old and new text input values.

The output is like this:

Old value: test test
New value: test w
Change: overwrote 'test' with 'w' at position 5

The script uses window.setInterval() to avoid cross browser problems (see https://stackoverflow.com/a/1949416/727190). This causes some changes to be batched when the user types really fast - this could be a good thing, depends on your situation.

You can, however, easily modify the script to work off events.

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

Excerpt from fiddle showing the result of the diff (the findChange() code is too long to paste here):

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:

Short Answer

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

Append supported or custom events, it should work. I hope this helps someone See Jquery Documentation for more help. http://api.jquery.com/on/