jQuery文本框变化事件

Question

文本输入元素没有change事件吗？当我将change事件处理程序附加到文本输入时，它不会被触发。虽然keyup事件可以被触发，但是keyup并不能完全检测到文本的变化，因为还有其他的方式可以输入文本进入输入框。

- jcvandan

---

也许这可以帮助你：https://dev59.com/GXM_5IYBdhLWcg3wNgKY - Bashwork

你正在使用 $('input').change(function(){ do something }); 吗？ - msmafra

是的，我之前使用了 .change 和 .keyup，但它们不足够，请查看下面的答案... - jcvandan

抱歉，我没有看到你的回答。 - msmafra

请参考$("#some-input").changePolling()的包装器，它会检查当前值并在其更改时触发.change()。 - Joel Purra

Answer 1

HTML4规范中 <input> 元素 支持以下脚本事件：

onfocus、onblur、onselect、onchange、 onclick、ondblclick、onmousedown、 onmouseup、onmouseover、onmousemove、 onmouseout、onkeypress、onkeydown、 onkeyup。

下面是一个绑定了所有这些事件并展示其功能的示例：http://jsfiddle.net/pxfunc/zJ7Lf/

我认为您可以过滤出与您情况真正相关的事件，并检测事件前后的文本值以确定更改。

- MikeM

---

我考虑同时使用change、focus、blur、keyup和mouseup - 但是mouseup只有在鼠标悬停在文本框上时才会触发，这意味着它无法捕获用户从上下文菜单中粘贴的内容，因为粘贴通常在文本输入范围之外。 - jcvandan

看起来新的浏览器支持 paste 和 input 事件，我在这里找到它们后添加了它们，jquery - How to detect right mouse click + paste using JavaScript?... 这是 更新后的 fiddle。 - MikeM

如果它们没有广泛的支持，那么它们可能有用，但实际上无法使用！ - jcvandan

实际上，在IE9/FF/Chrome中，input似乎是一个一站式的解决方案。 - MikeM

更新的 JSFiddle：http://jsfiddle.net/zJ7Lf/288/，演示了通过编程方式触发更改时捕获问题的示例。 - Jonathan

Answer 2

我发现这个方法是有效的：

$(document).ready(function(){
    $('textarea').bind('input propertychange', function() {
        //do your update here
    }

})

- Pow-Ian

---

我广泛地使用它来与ajax一起验证。我认为正在讨论的新变异事件将替换部分此功能，但这个解决方案已在Firefox、Chrome、IE 10和Safari中进行了测试，并且已知可行。 - Pow-Ian

Answer 3

change事件仅在输入框失去焦点（且内容已更改）后触发。

- ventaur

---

如果你真的想知道任何文本的变化，几乎在它变化时，你需要轮询输入。也就是说，使用 setInterval 函数和一个将当前输入值与之前存储的值（通过一些比该函数更高作用域的变量）进行比较的函数。如果两个值不匹配，则发生了变化。然后，将当前值存储到另一个变量中以供下次检查使用。 - ventaur

Answer 4

这个问题没有真正的解决方法 - 即使参考上面给出的其他问题链接。最终我决定使用 setTimeout 并调用一个每秒检查一次的方法！虽然不是理想的解决方案，但它是可行的，而且我调用的代码足够简单，不会因为被频繁调用而影响性能。

function InitPageControls() {
        CheckIfChanged();
    }

    function CheckIfChanged() {
        // do logic

        setTimeout(function () {
            CheckIfChanged();
        }, 1000);
    }

希望这篇文章能帮助到未来的某个人，因为似乎没有一种确切的方法可以使用事件处理程序来实现这一点...

- jcvandan

Answer 5

你可以实现它：

 $(document).ready(function(){              
     $('#textBox').keyup(function () {alert('changed');});
 });

或者使用更改（使用右键复制和粘贴）。

 $(document).ready(function(){              
     $('#textBox2').change(function () {alert('changed');});
 });

这是一个演示，链接为：Demo。

- Zaheer Ahmed

---

检查演示，它也处理复制粘贴。 - Zaheer Ahmed

是的，它无法处理鼠标右键粘贴然后切换窗口的情况。 - PandaWood

@PandaWood，对于你的情况它完美地运行。change（）第二个文本框将按照答案中所述进行处理。 - Zaheer Ahmed

@ZaheerAhmed 是的。你添加了“change”修复了那种情况。 - PandaWood

@ZaheerAhmed 哦，我明白了。 - PandaWood

@ZaheerAhmed 实际上，也许我的意思是，我进入 DEMO 链接，通过右键粘贴，在离开时事件不会触发 - 我在 DEMO 上不会收到那个消息框。 - PandaWood

Answer 6

$('#input').on("input",function () {alert('changed');});

对我来说可行。

- Yaseer Arafat