搜索框中的间距

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

我在按钮id旁边添加了"disabled"现在我有个问题。当我按下空格并点击搜索按钮时，没问题，一切都很好。但在我按下空格键和退格键后，我点击搜索按钮，它会显示结果。我无法解决这个问题。我想先预防一下空间。

Space不为null，您应该尝试$.trim((函数，trim将删除所有空格，只给出字符串，没有任何尾随空格

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

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

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

您需要使用keyup，因为当按下退格时，它会在所有浏览器中运行，而当更改value后，它会运行。

$(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()添加到末尾，因此在首次加载页面时也会运行该函数

只是缩小了一点，并使用$.trim来防止enabling被空白：

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

演示

相关内容

最新更新

热门标签：