输入元素上的 Javascript 更改事件仅在失去焦点时触发答案

【问题标题】：Javascript change event on input element fires on only losing focus输入元素上的 Javascript 更改事件仅在失去焦点时触发
【发布时间】：2011-10-29 16:16:33
【问题描述】：

我有一个输入元素，我想继续检查内容的长度，每当长度等于特定大小时，我想启用提交按钮，但是我遇到了 Javascript 的 onchange 事件的问题因为该事件仅在输入元素超出范围时触发，而不是在内容更改时触发。

<input type="text" id="name" onchange="checkLength(this.value)" />

----onchange 不会在更改 name 的内容时触发，而只会在 name 失去焦点时触发。

我可以做些什么来使此活动在内容更改方面发挥作用？或者我可以使用的其他活动？我通过使用 onkeyup 函数找到了一种解决方法，但是当我们从浏览器的自动完成器中选择一些内容时，它不会触发。

我想要一些可以在字段内容通过键盘或鼠标更改时起作用的东西......有什么想法吗？

【问题讨论】：

你可以使用onkeyup和onchange？
我唯一的问题是浏览器的自动完成器选择不会导致任何这些事件发生。
这是什么输入框？
哦...我忘了将它添加到示例代码中，它是一个文本字段。
我认为这将是一个非常普遍的问题，很多人都会面临它，但现在似乎反过来了......:)

标签： javascript jquery dom-events

【解决方案1】：

(function () {
    var oldVal;

    $('#name').on('change textInput input', function () {
        var val = this.value;
        if (val !== oldVal) {
            oldVal = val;
            checkLength(val);
        }
    });
}());

这将捕获change、击键、paste、textInput、input（如果可用）。并且在必要时不要开火。

http://jsfiddle.net/katspaugh/xqeDj/

参考资料：

textInput — W3C DOM Level 3 事件类型。 http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

当一个或多个字符具有被输入。这些字符可能来自各种来源，例如，由按下某个键产生的字符或从输入法的处理中释放到键盘设备上编辑器，或由语音命令产生。在哪里进行“粘贴”操作生成一个简单的字符序列，即文本段落没有任何结构或样式信息，此事件类型应为也生成了。

input — HTML5 事件类型。

当用户改变值时触发控件

Firefox、Chrome、IE9 和其他现代浏览器都支持它。

此事件在修改后立即发生，不像 onchange 事件在元素失去焦点时发生。

【讨论】：

它没有工作...你最后检查你的代码了吗？它是否正在从自动完成器中进行选择...？
我在 Chrome 15 中检查了textInput，它可以工作。我在 IE9 中检查了input 事件，它也可以工作。 Firefox 应该支持DOMAttrModified，但我没有安装它。这两个事件是您所希望的最好的事件，因为它们会触发任何类型的文本输入。
很棒的解决方案....输入对我来说就像是一种祝福...除了输入之外不需要其他任何东西，它本身就足够了。它适用于 ff4，但不适用于 3.x，我的桌面上有 3.6，但它从来没有用过......
为了保持更新，目前这个解决方案会在 FF22 中的单个输入更改上触发多次，您不需要使用 keypress 或 textinput 事件，输入和 propertychange 就足够了跨度>
我发现change、keyup和input是覆盖IE9和Firefox (36.0.4)的最佳组合。 keypress 事件似乎在 IE9 中不起作用，因为它没有捕获诸如 Delete 和 Backspace 之类的内容，而 input 事件涵盖了使用键盘和上下文菜单进行粘贴。

【解决方案2】：

作为对 katspaugh 答案的扩展，这是一种使用 css 类对多个元素执行此操作的方法。

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });

【讨论】：

【解决方案3】：

我花了 30 分钟才找到它，但这在 2019 年 6 月有效。

<input type="text" id="myInput" oninput="myFunction()">

如果你想在 js 中以编程方式添加事件监听器

inputElement.addEventListener("input", event => {})

【讨论】：

【解决方案4】：

Do it the jQuery way:

<input type="text" id="name" name="name"/>


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});

【讨论】：

这也只会在场失去焦点时触发。
@Felix Kling，是的，已将其更改为 keyup() ;)
keyup 再次出现同样的问题......我已经使用过它并且我遇到了问题。阅读我的完整问题。

【解决方案5】：

你可以使用onkeyup

<input id="name" onkeyup="checkLength(this.value)" />

【讨论】：

我使用过onkeyup ...但我的问题是当用户从浏览器的自动完成程序中选择时，不会触发此事件...我已经在解决方法的问题中写了这个我用过...

【解决方案6】：

如果你想抓住每一种可能性，你必须使用onkeyup和onclick（或onmouseup）的组合。

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />

【讨论】：

不错的尝试，但这里的问题是我没有在输入元素上按下鼠标，而是在自动完成器上按下鼠标，这不会触发此事件...
我唯一能想到的另一件事，而且很讨厌，就是setTimeout 并定期检查该字段的值......你到底想做什么？
那很讨厌...:D 这类似于密码强度指示器的作用，它会在您不断输入密码时告诉您密码的强度。我只想在输入的字符串长度为 10 时启用按钮，否则将其禁用。我希望你明白了......

【解决方案7】：

这是我针对相同问题开发的另一种解决方案。但是我使用了许多输入框，因此我将旧值保留为元素本身的用户定义属性：“数据值”。使用 jQuery 非常容易管理。

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

这里是，我使用了 5-6 个输入框有类 'filterBox'，只有当数据值不同于它自己的值时，我才会让 filterBy 方法运行。

【讨论】：