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

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

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

---- onchange不会在更改名称内容时触发，而仅在名称失去焦点时才触发。

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

我希望在通过键盘或鼠标更改字段内容时可以使用的东西……有什么想法吗？

(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级别3事件类型。http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

输入一个或多个字符后，用户代理必须调度此事件。这些字符可以源自多种来源，例如，由在键盘设备上按下或释放的键，输入法编辑器的处理或语音命令导致的字符。如果“粘贴”操作生成简单的字符序列，即没有任何结构或样式信息的文本段落，则也应生成此事件类型。

input— HTML5事件类型。

用户更改值时在控件上触发

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

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

作为对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());
        }
    });

我花了30分钟才能找到它，但这已经在2019年6月开始了。

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

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

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

使用jQuery方式：

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


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

您可以使用onkeyup

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

如果要抓住一切可能，则必须使用onkeyup和onclick（或onmouseup）的组合。

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

这是我针对相同问题开发的另一种解决方案。但是，我使用了许多输入框，因此我将旧值保留为元素本身的用户定义属性：“数据值”。使用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'，仅当data-value与其自身值不同时，我才使filterBy方法运行。