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

这将抓住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

Do it the jQuery way:

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


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

Answer 4

您可以使用onkeyup

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

Answer 5

如果您想抓住所有可能性，则必须使用onkeyup和onclick（或onmouseup）的组合。

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

Answer 6

这是我针对同样问题开发的另一种解决方案。但是我使用了很多输入框，因此我将旧值保留为元素本身的用户定义属性：“data-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个输入框有'classBox'类，我使filterBy方法只在数据值不同于它自己的值时运行。

Answer 7

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

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

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

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

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

7 个答案: