正确处理输入变更事件 [英] Proper handling of input change event
问题描述
这可能是更改事件的正确行为，但以下行为有点烦人。当从字段历史记录更新值时（请参阅下面的说明），不会触发事件。
It may be a correct behavior of change event, but the below behavior is bit annoying. When the value is updated from the field history (see explanation below), the event is not triggered.
请参阅下面的示例代码。结果输入字段随输入字段'input1'的更改而更新。表单和提交按钮不完全相关，但需要提交表单以使浏览器保留字段值的历史记录。
要测试：
Please see example code below. the result input field is updated with the change in input field 'input1'. The form and submit button is not fully relevant, but needed to submit a form to make the browser keep the history of field values. To test:
- 输入字段中的任何输入（比如ABC）
- 提交表格
- 输入1（A）输入的第一个字符
- 使用向下箭头选择上一个值+ Enter
- 或使用鼠标从历史记录中选择前一个值
未检测到输入更改。
- enter any input in the field (say ABC)
- Submit the form
- enter first character of input from 1 (A)
- use the down arrow to select the previous value + Enter
- or use the mouse to select the previous value from the history No input change is detected.
哪个事件/应该如何修改此代码，以便在输入值更改时生成事件。
Which event/ how should this code should modify so that an event is generated whenever the input value is changed.
谢谢。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
Result:<input type="text" id="result" readonly></input>
<form method="post" action="">
<input type="text" id="input1" />
<button type=submit>Submit</button>
</form>
<script >
$(document).ready(function() {
$('#input1').change(
function(){
$('#result').val($('#input1').val());
});
});
</script>
</body>
</html>
推荐答案
我认为这与jQuery无关。
I think this has nothing to do with jQuery.
当控件内容发生变化且控件失去焦点时，应调度更改事件。实际上，改变事件的实现在浏览器中是不一致的，例如， Firefox在单击单选按钮时调度更改事件，而不是在失去焦点时调度。同样在IE中，从先前值列表中选择一个值然后导致模糊事件不会触发更改事件。
A change event should be dispatched when the content of a control has changed and the control loses focus. In practice, the implementation of the change event is inconsistent in browsers, e.g. Firefox dispatches a change event when radio buttons are clicked on rather then when they lose focus. Also in IE, selecting a value from a list of previous values then causing a blur event doesn't fire a change event.
请注意，要使表单控件成功，他们必须具有带值的name属性。一个简单的测试用例是：
Note that for form controls to be successful, they must have a name attribute with a value. A simple test case is:
<form action="#">
<input type="text" name="input1" onchange="alert('changed');">
<input type="submit">
</form>
一种解决方案是使用模糊事件代替并比较控件的当前值到 defaultValue - 如果它们不同，请执行您为更改事件要做的任何事情。如果值可能会多次更改，则在第一次需要与最后的值 onblur进行比较后，而不是 defaultValue 。
One solution is to use the blur event instead and compare the control's current value to its defaultValue - if they're different, perform whatever it is you were going to do for the change event. If the value may be changed a number of times, after the first time you need to compare with the last value onblur rather than the defaultValue.
无论如何，这是一个可以调用onblur来查看文本输入是否已更改的函数。如果你想将它与其他类型的表单控件一起使用，它需要一些工作，但我不认为这是必要的。
Anyhow, here's a function that can be called onblur to see if a text input has changed. It needs a bit of work if you want to use it with other types of form control, but I don't think that's necessary.
<form action="#">
<input type="text" name="input1" onblur="
var changed = checkChanged(this);
if (changed[0]) {
alert('changed to: ' + changed[1]);
}
">
<input type="submit">
</form>
<script type="text/javascript">
// For text inputs only
var checkChanged = (function() {
var dataStore = [];
return function (el) {
var value = el.value,
oValue;
for (var i=0, iLen=dataStore.length; i<iLen; i+=2) {
// If element is in dataStore, compare current value to
// previous value
if (dataStore[i] == el) {
oValue = dataStore[++i];
// If value has changed...
if (value !== oValue) {
dataStore[i] = value;
return [true, value];
// Otherwise, return false
} else {
return [false, value];
}
}
}
// Otherwise, compare value to defaultValue and
// add it to dataStore
dataStore.push(el, value);
return [(el.defaultValue != value), value];
}
}());
</script>
这篇关于正确处理输入变更事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
