jquery焦点和模糊函数，但如果val不等于null。

Question

我正在尝试根据焦点和模糊事件修改输入的背景。这部分很好用，但如果客户端在搜索框中输入了值，我还想设置背景。如果您输入文本，然后立即单击submit按钮(尽管您可以看到非常简短的背景变化)，它确实可以工作。

但是，如果当前搜索框中有一个值，并且客户端触发了模糊功能，它还会更改输入的背景。

如果搜索框中有值，我如何确保模糊功能不会被触发？

这是我到目前为止的代码：

 // change input field on blur and focus
var $searchFocus = 'url("img/layout/spyglass.png") no-repeat 2px 0 #FFFFFF';
var $searchBlur = 'url("img/layout/spyglass-text.png") no-repeat 2px 0 #FFFFFF';
$('#query').css('background', $searchBlur);

if($('#query').val() !='') {
    $('#query').css('background', $searchFocus);
}

$('#query').focus(function(){
    $('#query').css('background', $searchFocus);
}); 

$('#query').blur(function() {
    $('#query').css('background', $searchBlur);
});

我做了一个jsfiddle

也许我想要一些与模糊函数不同的东西？

提亚

Answer 1

显而易见的解决方案是简单地测试模糊函数中的值。

但是，您的问题明确指出，只有当值为空时才应触发模糊函数。

此解决方案在值更改时添加和删除模糊函数。

function setSearchBackground() {
     $('#query').css('background', $searchBlur);  
}

$('#query').on('blur', setSearchBackground);


$('#query').change(function() {
    if($(this).val() == '') {
        $(this).on('blur', setSearchBackground);
    } else {
        $(this).off('blur', setSearchBackground);
    }
});

http://jsfiddle.net/sUtTp/

就我个人而言，我会像Kyle所描述的那样解决这个问题，并在blur函数中执行值检查。

Answer 2

对于你的模糊：

$('#query').blur(function() {
    if(!$('#query').val()) $('#query').css('background', $searchBlur);
});

更新的工作小提琴：

http://jsfiddle.net/e6uTB/3/

更新

作为额外的奖励，我重构了你的代码！

http://jsfiddle.net/e6uTB/8/