通过鼠标操作更改浏览器文本输入时做出反应答案

【问题标题】：React when Browser Text Input Changed through Mouse Action通过鼠标操作更改浏览器文本输入时做出反应
【发布时间】：2013-03-12 07:07:16
【问题描述】：

我有一个文本输入字段和一个复选框。当且仅当在文本字段中有输入时，必须禁用该复选框。我有一个适用于大多数情况的解决方案：

HTML：

<input type="text" id="search" />
<input type="checkbox" id="cb" />
<label for="cb">Enabled only if no search term</label>

jQuery:

$('#search').keyup(function (e) {
    var enable = $(this).val() == 0;
    if (enable) {
        $('#cb').removeAttr('disabled');
    } else {
        $('#cb').attr('disabled', 'disabled');
    }
});

看live on jsFiddle。

这适用于使用键盘键入或删除文本以及使用键盘粘贴文本时。

如果用户使用右键单击上下文菜单粘贴文本，或者用户按下 IE 添加到输入字段以允许清除输入字段的小“X”，则会失败。

问题

如何改进代码以使其在这些情况下也能正常工作？等待文本框失去焦点会提供较差的用户体验。

【问题讨论】：

你可以使用来自here的Jquery实时验证插件
@Cthulhu：这看起来非常酷。打算试试看。
@Cthulhu：就像一个魅力！如果您想将您的评论变成答案（不仅仅是只是一个链接），我很乐意接受。
过去在 IE9 上存在一些问题。你可能想检查一下。这将是一个仅限链接的答案，所以我想我会让它作为评论继续存在:)
@Cthulhu：我可以确认 IE9 的问题，但它在 IE10 中有效。知道 IE9 可能导致问题的原因是什么吗？

标签： javascript jquery

【解决方案1】：

Real Time Validation jQuery 插件解决了这个问题。但是，not seem to work currently 会处理委托事件。

实现这一点需要将事件绑定到 keyup 事件，如果您想检测剪切和粘贴时的文本更改，还需要一些其他事件。即使你是 JavaScript 大神，一遍又一遍地编写这个逻辑也是乏味的。聪明点，改用 ZURB 文本更改事件插件。

【讨论】：

【解决方案2】：

可以使用jquery的改变方法：

http://jsfiddle.net/WDMCX/1/

$('#search').change(function() {

    if( $(this).val() === '' ){
        $('#cb').attr('disabled', 'disabled');
    } else {
        $('#cb').removeAttr('disabled');
    }

});

【讨论】：

请解释反对意见。如果我错了，我想知道正确的方法，就像 OP 一样。
我没有投反对票，但在文本输入字段失去焦点之前，change 不会触发。不太理想的解决方案，因为焦点丢失可能是应该禁用的复选框。不过，可能是唯一的解决方案。