Question

首先，我知道这有been asked before。我再次要求希望更新版本的常见库如jQuery解决了这个问题。这可能是一厢情愿的想法，我知道......

话虽如此，有没有办法检测到<input>的所有更改（按键，粘贴，自动更正）？我使用$("#myElement").bind('input propertychange', function (e) {...});直到IE9出现并打破它（它不会在退格/剪切/删除时触发）。

我知道有三个选项，所有选项都有缺点：

绑定更多事件（加密，粘贴等）并使用setTimeout忽略重复项。
根据浏览器检测绑定到特定事件。
绑定更多事件，使用jQuery.data()跟踪旧值，并在触发处理程序之前与之进行比较（如this answer中所示）。

如果还没有“更好的方法”，您更喜欢上述哪种，为什么？

Answer 1

作为不支持oninput的浏览器的后备，您可以在该字段上同时使用onkeyup和oninput个事件，但会撤消事件处理程序以防止多次执行：< / p>

$('input').on('keyup input', debounce(function() {
  // do something
  console.log('input'):
}, 500));

var debounce = function(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Answer 2

您可以尝试keypress event。但是，我使用blur event。

对你来说有一点哲学：我发现文本框会以任何方式改变我的文本形状或形式，因为我打字反直觉和讨厌。

当然，对于类似的东西，比如说3场SSN，你想继续检查长度以将它们射到下一个场，但是对于其他所有场景它都是.blur()。

Answer 3

如果您只支持现代浏览器，是的，有一种方法可以只使用一个事件进行跨浏览：input

$(myelement).on('input',function(){
    console.log(this.value);
});

如果您希望继续支持旧浏览器，则必须继续为它们使用变通方法，因为旧版本的浏览器不会被修复。

我更喜欢将keydown与输入配对，因为keydown会在触发输入事件的同时触发。

Answer 4

试试这个：

<input type="text" onchange="$(this).trigger('change');">

如果有效，您可以有条件地使用.attr('onchange', '...')用于有缺陷的浏览器，以避免使用黑客攻击标记。

<script>
    <!--[if lte IE 9]>
        $('input[type=text]').attr('onchange', '$(this).trigger(\'change\')');
    <![endif]-->
</script>

是否有一种良好的跨浏览器方式来检测<input />的更改？

4 个答案: