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

Question

我有一个输入元素,我想继续检查内容的长度,每当长度变得等于特定大小时,我想启用提交按钮,但我遇到的问题是javascript的onchange事件作为事件仅当输入元素超出范围而不是内容更改时才触发.

__CODE__

---- onchange不会在更改名称内容时触发,但仅在名称失焦时触发.

我能做些什么来使这个事件能够改变内容吗？还是我可以使用的其他事件？我通过使用onkeyup函数找到了一种解决方法,但是当我们从浏览器的自动完成程序中选择一些内容时,这并没有触发.

我希望通过键盘或鼠标来改变字段内容时可以使用的东西...任何想法？

Answer 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事件不同,后者发生在元素失去焦点时.

Answer 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());
        }
    });

Answer 3

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

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

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

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