jquery 的焦点和模糊功能，但如果 val 不等于 null。答案

【问题标题】：jquery focus and blur function but also if val is not equal to null.jquery 的焦点和模糊功能，但如果 val 不等于 null。
【发布时间】：2013-03-25 20:56:50
【问题描述】：

我正在尝试根据焦点和模糊事件修改输入的背景。该部分工作正常，但如果客户端在搜索框中输入了值，我也想设置背景。如果您输入文本然后立即单击提交按钮，它确实有效（尽管您可以非常短暂地看到背景更改）。

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

如果搜索框有值，如何保证不触发模糊功能？

这是我迄今为止的代码：

 // 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

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

TIA

【问题讨论】：

标签： jquery html input focus blur

【解决方案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 函数中执行值检查。

【讨论】：

【解决方案2】：

为了你的模糊：

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

更新的工作小提琴：

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

更新

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

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

【讨论】：

非常棒，很棒的工作，我想到了 OR 语句，但这确实有效。谢谢。
没问题，也请查看我为您所做的重构。它会节省你的时间