当浏览器文本输入通过鼠标动作改变时做出反应

React when Browser Text Input Changed through Mouse Action

本文关键字：改变 文本 浏览器 输入 鼠标      更新时间：2023-09-26

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

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');
    }
});

在jsFiddle上观看。

当使用键盘输入或删除文本，以及使用键盘粘贴文本时，此操作有效。

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

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

实时验证jQuery插件解决了这个问题。但是，它目前似乎不能用于委托事件。

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

您可以使用jquery的更改方法:

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

$('#search').change(function() {
    if( $(this).val() === '' ){
        $('#cb').attr('disabled', 'disabled');
    } else {
        $('#cb').removeAttr('disabled');
    }
});
相关文章：