-1 
$(document).ready(function()
{
   $('#searchInput').keypress(function() 
   {
      if($(this).val() == '')
      {
        $('#button').attr('disabled', true);
      }
      else
      {
        $('#button').removeAttr('disabled');
      }

   });
});

ボタンIDの横に「無効」を追加しましたが、問題が発生しました。スペースを押して検索ボタンをクリックしても問題ありません。しかし、スペースキーを押してバックスペースを押した後、検索ボタンをクリックすると表示されます結果.問題を解決できませんでした.スペースの初期化を防止したい.

4

3 に答える 3

1

$.trim() functionを試す必要があります。トリムはすべてのスペースを削除し、末尾のスペースを含まない文字列のみを提供します

 $('#searchInput').keypress(function() 
 {
   if ($.trim($(this).val()) == '')
   {
     $('#button').attr('disabled', true);
   }
   else
   {
     $('#button').removeAttr('disabled');
   }
 });
于 2013-02-10T13:12:54.653 に答える
0

奇妙なことに、ブラウザの奇妙な動作に直面しています。IE および Webkit ブラウザーでbackspaceは、イベントを発生させないkeypressため、ハンドラーは実行されません。

ただし、Firefox では、要素の が変更される前に関数が実行されます。valueしたがって、 と入力spaceすると、関数が実行され、valueまだ空です。したがって、ボタンは無効になっています。次に、 を押すbackspaceと、関数が実行されますがvalue、スペースが含まれる 1 文字の文字列のままです。したがって、ボタンが有効になります。

これは、が押されたときにすべてのブラウザーで実行され、が変更された後keyupに実行されるため、代わりに使用する必要があります。backspacevalue

$(document).ready(function () {
    $('#searchInput').keyup(function () {
        if (this.value == '') {
            $('#button').prop('disabled', true);
        } else {
            $('#button').prop('disabled', false);
        }
    }).keyup(); 
});

実施例

私が行った変更：

  • keypressに変更keyup
  • this.valueではなく$(this).val(): はるかに高速
  • prop('disabled', true)ではなくattr('disabled', true)：これは使用する正しい関数であり、奇妙なことを回避しますremoveAttr
  • 最後に追加keyup()するため、ページが最初に読み込まれたときにも関数が実行されます
于 2013-02-10T13:15:28.567 に答える
0

少し縮小して、空白$.trimで防ぐために使用します。enabling

$('#searchInput').keyup(function () {
       $('#button').prop('disabled', !$.trim(this.value));
}).keyup();

デモ

于 2013-02-19T01:40:41.523 に答える