1

テキスト入力フィールドとチェックボックスがあります。テキストフィールドに入力がある場合にのみ、チェックボックスを無効にする必要があります。ほとんどのシナリオでうまく機能するソリューションがあります。

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」を押して入力フィールドをクリアできるようにすると失敗します。

質問

これらのシナリオでも機能するようにコードを改善するにはどうすればよいですか？テキストボックスのフォーカスが失われるのを待つと、ユーザーエクスペリエンスが低下します。

4

2 に答える 2

1

リアルタイム検証jQueryプラグインはこの問題を解決します。ただし、現在、委任されたイベントでは機能しないようです。

これを実装するには、キーアップイベントへのバインドイベントと、カットアンドペーストでのテキストの変更を検出する場合は他のいくつかのイベントが必要です。あなたがJavaScriptの神であるとしても、このロジックを何度も何度も書き続けるのは面倒です。スマートになり、代わりにZURBテキスト変更イベントプラグインを使用してください。

于 2013-03-11T23:07:16.420 に答える
0

jqueryの変更メソッドを使用できます。

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

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

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

});
于 2013-03-11T20:19:13.687 に答える