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

Question

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

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

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

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

我想要一些可以在字段内容发生变化（无论是通过键盘还是通过鼠标）时起作用的东西......有什么想法吗？

Answer 1

(function () {
    var oldVal;

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

这将捕获更改、击键、粘贴、textInput、输入（如果可用）。并且不要开超过必要的火。

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

---

参考文献：

< a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-textinput" rel="noreferrer">textInput — W3C DOM Level 3 事件类型。 http://www.w3.org/TR/DOM- 3 级事件/#events-textevents

当一个或多个字符出现时，用户代理必须调度此事件
已输入。这些字符可能源自多种
来源，例如，按下按键或产生的字符
通过输入法的处理在键盘设备上释放
编辑器，或由语音命令产生。其中“粘贴”操作
生成一个简单的字符序列，即一段文本
没有任何结构或样式信息，此事件类型应该是
也生成了。

input — HTML5 事件类型。

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

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

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

Answer 2

我花了 30 分钟才找到它，但这是在 2019 年 6 月运行的。

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

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

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

Answer 3

作为 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 4

以 jQuery 方式进行操作：

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


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

Answer 5

您可以使用 onkeyup

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

Answer 6

如果您想捕获所有可能性，则必须结合使用 onkeyup 和 onclick（或 onmouseup）。

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

Answer 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”类的输入框，
仅当 data-value 与其自身值不同时，我才运行 filterBy 方法。