javascript 检测文本输入的值是否在没有事件的情况下发生变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9035687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if the value of a text input changes with no event
提问by Ered
I'm looking to get the value of this input if it changes. I have a map.swf that makes the value change depending on what the user selects in the .swf, so I was wondering how to get this done.
如果它发生变化，我希望获得此输入的值。我有一个 map.swf，它根据用户在 .swf 中选择的内容更改值，所以我想知道如何完成此操作。
<a href="map.php" onclick='return GB_showCenter("",this.href,380,780);' class="page">See Map</a>
<input name="sector_e" type="text" id="sector_e" value="Please click The Map" size="1" readonly>
This jQuery only alerts me if I press a key, I want it to alert if the value changes without any event.
这个 jQuery 只在我按下一个键时提醒我，我希望它在没有任何事件的情况下更改值时提醒我。
$('#sector_e').bind("keyup", function() {
alert($(this).val());
});
采纳答案by Prisoner ZERO
You will need to do a combination of things:
您将需要做以下几件事：
- Use jQuery's
datacommand capabilities to save the initial value. - Use the jQuery's
focusoutorblurorchangeevent to check the current value against what is saved usingdata.
Which even you choose depends on whether or not direct user-interaction is possible or not. Further processing can happen once you detect a change.
甚至您选择哪个取决于是否可以进行直接的用户交互。一旦您检测到更改，就可以进行进一步的处理。
FOR EXAMPLE:
You might consider marking the element with a class name like "isDirty" using jQuery's addClasscommand.
例如：
您可能会考虑使用 jQuery 的addClass命令将元素标记为类似“isDirty”的类名。
Then you could do things like:
然后你可以做这样的事情：
$('.isDirty')
In the meantime...
同时...
HERE IS A CODE SAMPLE USING FOCUSOUT:
这是使用 FOCUSOUT 的代码示例：
<script type="text/javascript">
$(document).ready(function () {
var txtSectorE = $('#sector_e');
// Save the initial value
$.data(txtSectorE, "last", txtSectorE.val());
// Setup the event
txtSectorE.focusout(function () {
var last = $.data(txtSectorE, "last");
if (last != $(this).val())
alert("changed");
});
});
</script>
<input id="sector_e" name="sector_e" type="text" value="Please click The Map">
Of course, doing it this way is taxing as you would have to write a separate set of calls for each textbox.
当然，这样做很费力，因为您必须为每个textbox.
So, why not add a class name to each textboxand do it this way...
那么，为什么不给每个添加一个类名textbox并这样做呢......
A BETTER EXAMPLE USING FOCUSOUT:
使用 FOCUSOUT 的更好示例：
<script type="text/javascript">
$(document).ready(function () {
var txtSectors = $('.sector');
$.each(txtSectors, function (index, textbox) {
// Save the initial value
$.data(textbox, "last", textbox.val());
// Setup the event
textbox.focusout(function () {
var element = $(this);
var last = $.data(element, "last");
if (last != element.val())
alert("changed");
});
});
});
</script>
<input id="sector_a" type="text" class="sector" value="Something">
<input id="sector_b" type="text" class="sector" value="Another">
<input id="sector_c" type="text" class="sector" value="Yet Again">
<input id="sector_d" type="text" class="sector" value="Wow This Arduous">
<input id="sector_e" type="text" class="sector" value="Getting Tired Of Typing">
回答by arthur
The event "change" should do what you want :)
事件“改变”应该做你想做的:)
$('#sector_e').bind("change", function() {
alert($(this).val());
});
edit: To make this work, the swf must also trigger the change event.
编辑：要使这项工作，swf 还必须触发更改事件。
If this is not possible, you can check every n milliseconds if the value has change and trigger the change event in this case.
如果这是不可能的，您可以每 n 毫秒检查一次值是否发生变化并在这种情况下触发更改事件。
var checkChange function($object){
var currentValue = $object.val();
var checkChanges = function() {
if (checkChanges.val() != currentValue) {
currentValue = checkChanges.val();
$object.trigger("change");
}
}
window.setInterval(checkChanges, 100);
}
checkChange($('#sector_e'));
回答by RvdK
If there is no event triggered when the value of the text input changes (Via SWF or JS). A solution is to use a timer to constantly check for the value of the text input. If it is different that than the previously stored value is has changed and then you can do your thing.
如果文本输入的值发生变化时没有触发事件（通过 SWF 或 JS）。一种解决方案是使用计时器不断检查文本输入的值。如果与之前存储的值不同的是已经改变，那么你可以做你的事情。
(Far from optimal but a solution)
（远非最佳但解决方案）
See here for an implementation: I want to trigger an event every single time data changes in an HTML text input field regardless of focus
请参阅此处的实现：我想在 HTML 文本输入字段中每次数据更改时触发一个事件，而不管焦点如何
setInterval( function() {
$('input').each( function() {
if ($(this).val() != $(this).data("_value")) {
// Save the new value
var myVal = $(this).val();
$(this).data("_value",myval);
// TODO - Handle the changed value
}
});
}, 100);
From @Plutor
来自@Plutor
