是否有可能以某种方式将javascript(jQuery是最好的)事件绑定到“更改”表单输入值?
我知道.change()
方法,但是在你(光标)离开输入字段之前它不会触发。我也考虑过使用.keyup()
方法,但它也会对箭头键做出反应等等。
我只需触发一个动作每次输入中的文字都会发生变化,即使它只有一个字母更改。
答案 0 :(得分:73)
有一个简单的解决方案,即HTML5 input
事件。在<input type="text">
元素的所有主要浏览器的当前版本中都支持它,并且IE的简单解决方法&lt; 9.有关详细信息,请参阅以下答案:
示例(IE&lt; 9除外:请参阅上面的链接以获取解决方法):
$("#your_id").on("input", function() {
alert("Change to " + this.value);
});
答案 1 :(得分:14)
是的,将其与更改前的值进行比较。
var previousValue = $("#elm").val();
$("#elm").keyup(function(e) {
var currentValue = $(this).val();
if(currentValue != previousValue) {
previousValue = currentValue;
alert("Value changed!");
}
});
另一种选择是仅在某些键上触发更改的功能。使用e.KeyCode
确定按下了哪个键。
答案 2 :(得分:7)
function checkChange($this){
var value = $this.val();
var sv=$this.data("stored");
if(value!=sv)
$this.trigger("simpleChange");
}
$(document).ready(function(){
$(this).data("stored",$(this).val());
$("input").bind("keyup",function(e){
checkChange($(this));
});
$("input").bind("simpleChange",function(e){
alert("the value is chaneged");
});
});
答案 3 :(得分:6)
您还可以将初始值存储在数据属性中,并使用当前值对其进行测试。
<input type="text" name="somename" id="id_someid" value="" data-initial="your initial value" />
$("#id_someid").keyup(function() {
return $(this).val() == $(this).data().initial;
});
如果初始值未更改,则返回true。
答案 4 :(得分:2)
您可以在jQuery中使用数据并捕获所有事件,然后根据它的最后一个值(未经测试)对其进行测试:
$(document).ready(function() {
$("#fieldId").bind("keyup keydown keypress change blur", function() {
if ($(this).val() != jQuery.data(this, "lastvalue") {
alert("changed");
}
jQuery.data(this, "lastvalue", $(this).val());
});
});
这也可以很好地对付很长的项目列表。使用jQuery.data
意味着您无需创建javascript变量来跟踪该值。您可以$("#fieldId1, #fieldId2, #fieldId3, #fieldId14, etc")
跟踪许多字段。
更新:将blur
添加到bind
列表。
答案 5 :(得分:1)
您可以在键和鼠标事件的组合上设置事件,也可以设置onblur。在那种情况下,存储输入的值。在下一个调用中,将当前值与最后存储的值进行比较。只有在实际改变后才能发挥你的魔力。
以一种或多或少的方式做到这一点:
您可以将数据与DOM元素相关联(查找api.jquery.com/jQuery.data)因此,您可以编写分配给表单中所有元素的一组通用事件处理程序。每个事件都可以将触发的元素传递给一个通用函数。该函数可以将旧值添加到元素的数据中。这样,你应该能够将它作为一个通用的代码片段来实现,它可以处理整个表单以及从现在开始编写的每个表单。 :)我想它可能只需要大约20行代码。
一个例子就是这个小提琴:http://jsfiddle.net/zeEwX/
答案 6 :(得分:1)
我不得不将这种代码用于将内容粘贴到字段中的扫描程序
$(document).ready(function() {
var tId,oldVal;
$("#fieldId").focus(function() {
oldVal = $("#fieldId").val();
tId=setInterval(function() {
var newVal = $("#fieldId").val();
if (oldVal!=newVal) oldVal=newVal;
someaction() },100);
});
$("#fieldId").blur(function(){ clearInterval(tId)});
});
未经测试......
答案 7 :(得分:1)
我认为没有“简单”的解决方案。您可能需要同时使用onKeyUp和onChange上的事件,以便在使用鼠标进行更改时也能捕获。每次调用代码时,您都可以将附加到此字段的this.seenValue上已经看到的值存储起来。这应该会更容易一些。
答案 8 :(得分:0)
由于用户可以进入操作系统菜单并使用鼠标选择粘贴,因此没有安全事件可以为您触发。我发现始终有效的唯一方法是使用setInterval检查输入值是否已更改:
var inp = $('#input'),
val = saved = inp.val(),
tid = setInterval(function() {
val = inp.val();
if ( saved != val ) {
console.log('#input has changed');
saved = val;
},50);
您也可以使用jQuery特殊事件进行设置。