Question

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

   });
});

我在按钮ID“禁用”旁边添加了现在我有一个问题。当我按空格键并单击搜索按钮时，没问题，一切都很好。但是在我按下空格键并按下退格键后，我点击搜索按钮并显示结果。我无法解决问题。我想预防空间初始。

Answer 1

空格不为空你应该尝试 $。trim（）函数， trim将删除所有空格并仅提供没有任何尾随空格的字符串

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

Answer 2

奇怪的是，您遇到了一些奇怪的浏览器行为。在IE和Webkit浏览器中， backspace 不会触发keypress事件，因此永远不会执行处理程序。

但是，在Firefox中，该功能在元素的value更改之前运行。因此，当您键入 space 时，该函数将运行，value仍为空。因此该按钮被禁用。然后按 backspace ，并且运行value的函数仍然是一个单字符的字符串，其中有一个空格。因此按钮已启用。

您需要使用keyup，因为当按下 backspace 时，它会在所有浏览器中运行，并且在 value之后运行改变了。

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

Working example

我所做的改变：

将keypress更改为keyup

this.value而不是$(this).val()：快得多

prop('disabled', true)而不是attr('disabled', true)：这是正确使用的功能，避免做奇怪的removeAttr

将keyup()添加到结尾，因此该功能也会在首次加载页面时运行

Answer 3

稍微缩小一点并使用$.trim来阻止空白 enabling ：

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

Demo

搜索框中的间距

3 个答案: