3

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

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

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

这是我迄今为止的代码：

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

4

2 回答 2

4

为了你的模糊：

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

更新的工作小提琴：

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

更新

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

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

于 2013-04-03T23:40:59.463 回答
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。

于 2013-04-03T23:57:09.537 回答