3

focus イベントと blur イベントに基づいて、入力の背景を変更しようとしています。その部分は問題なく動作しますが、クライアントが検索ボックスに値を入力した場合の背景も設定したいと考えています。テキストを入力してすぐに送信ボタンをクリックすると機能します (ただし、背景が非常に短時間変化することがわかります)。

ただし、値が現在検索ボックスにあり、クライアントがぼかし機能をトリガーする場合、入力の背景も変更されます。

検索ボックスに値がある場合にぼかし機能がトリガーされないようにするにはどうすればよいですか?

これは私のコードです。

 // 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を作りました

多分私はぼかし機能とは違うものが欲しいですか？

ティア

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

明白な解決策は、blur 関数内で値を単純にテストすることです。

ただし、質問では、値が空の場合にのみぼかし関数をトリガーする必要があると明示的に述べています。

このソリューションは、値が変更されたときにぼかし機能を追加および削除します。

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/

個人的には、カイルが説明したように問題を解決し、関数内で値チェックを実行しますblur。

于 2013-04-03T23:57:09.537 に答える