input元素上的javascript更改事件只会失去焦点

我有一个input元素,我想继续检查的内容的长度和每当长度等于一个特定的大小,我想启用提交button,但我面临一个JavaScript事件作为事件的问题只有当input元素超出范围而不是内容改变时才会触发。

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

—- onchange不会更改名称内容,而只会在名称不准确时触发。

有什么我可以做的,使这个事件工作内容的变化? 或者我可以使用这个事件? 我通过使用onkeyup函数find了一个解决方法,但是当我们从浏览器的自动完成器中select一些内容时,它不会触发。

我想要的东西,可以工作时,无论是通过键盘或鼠标的领域的内容…任何想法?

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

这将捕获change ,击键, pastetextInputinput (如果可用)。 而不是超过必要的火灾。

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


参考文献:

textInput – 一个W3C DOM Level 3事件types。 http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

用户代理必须在input一个或多个字符时调度此事件。 这些字符可以来源于各种来源,例如,由在键盘装置上按下或释放的键所产生的字符,来自input法编辑器的处理或来自语音命令的字符。 在“粘贴”操作产生简单的字符序列的情况下,即,没有任何结构或样式信息的文本片段,也应该生成该事件types。

input – 一个HTML5事件types。

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

Firefox,Chrome, IE9等现代浏览器都支持它。

这个事件在修改之后立即发生,不像元素失去焦点时发生的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()); } }); 

这样做的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)" /> 

如果你想抓住每一个可能性,你将不得不使用onkeyuponclick (或onmouseup )的组合。

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

这是我针对同样问题开发的另一个解决scheme。 不过,我使用了许多input框,所以我保留了旧值作为元素本身的用户定义属性:“数据值”。 使用jQuery很容易pipe理。

  $(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个input框都有类“filterBox”,我只有在数据值不同于它自己的值的时候才使filterBy方法运行。