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
,击键, paste
, textInput
, input
(如果可用)。 而不是超过必要的火灾。
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)" />
如果你想抓住每一个可能性,你将不得不使用onkeyup
和onclick
(或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方法运行。