$(document).ready(function()
{
$('#searchInput').keypress(function()
{
if($(this).val() == '')
{
$('#button').attr('disabled', true);
}
else
{
$('#button').removeAttr('disabled');
}
});
});
我在按钮ID“禁用”旁边添加了 现在我有一个问题。当我按空格键并单击搜索按钮时,没问题,一切都很好。但是在我按下空格键并按下退格键后,我点击搜索按钮并显示结果。我无法解决问题。我想预防空间初始。
答案 0 :(得分:1)
空格不为空你应该尝试 $。trim()函数, trim将删除所有空格并仅提供没有任何尾随空格的字符串
$('#searchInput').keypress(function()
{
if ($.trim($(this).val()) == '')
{
$('#button').attr('disabled', true);
}
else
{
$('#button').removeAttr('disabled');
}
});
答案 1 :(得分:0)
奇怪的是,您遇到了一些奇怪的浏览器行为。在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();
});
我所做的改变:
keypress
更改为keyup
this.value
而不是$(this).val()
:快得多prop('disabled', true)
而不是attr('disabled', true)
:这是正确使用的功能,避免做奇怪的removeAttr
keyup()
添加到结尾,因此该功能也会在首次加载页面时运行答案 2 :(得分:0)
稍微缩小一点并使用$.trim
来阻止空白 enabling
:
$('#searchInput').keyup(function () {
$('#button').prop('disabled', !$.trim(this.value));
}).keyup();