0

何かを書くと、入力フィールドに「クリア」アイコンが動的に表示されます。キープレスとフォーカス イベントはそれをうまく処理します。唯一のことは、入力フィールドがフォーカス モードでないときにアイコンを削除することです。問題は、アイコンにクリック イベントがあるため、アイコンをクリックすると focusout イベントが発生することです。私はそれを理解することはできません。

$(".searchInput").focusout(function(e) {
    console.log(e);

    if(e.currentTarget != this) {
        if ($(".keypress").length > 0) {
            $(".keypress").remove();
        }
    }
})

少しフィドルをまとめました: http://jsfiddle.net/w9RbW/。

ご覧のとおり、入力値が空でない場合、アイコンはまだそこにあり、クリックされているかどうかを確認する方法がわかりません...

4

4 に答える 4

1

これを参照してください http://jsfiddle.net/w9RbW/8/

フォーカスされていないときにのみアイコンを削除したい場合。

    $(".searchInput").focusout(function(e) {
  $(".keypress").css('opacity', '0');
        if(e.currentTarget != this) {
            if ($(".keypress").length > 0) {
                $(".keypress").remove();
            }
        }
    })
于 2013-01-16T16:06:23.907 に答える
0

「クリア」アイコンの有無を10秒ごとにチェックするタイマーをセットしてみませんか？テキストボックスがフォーカスを失ったことがわかったら、そのクリアアイコンを削除して、そのタイマーを停止できます。

jQueryを使用して入力にフォーカスがあるかどうかをテストする

于 2013-01-16T16:07:47.183 に答える
0

問題 (ご存じのとおり) は、テキスト ボックスからフォーカスを外すと、クリック イベントが発生する前にクリア アイコンが削除されることです。考えられる解決策の 1 つは、クリア アイコンを削除するのではなく、不透明度を変更して、引き続きイベントを受信できるようにすることです。

デモ: http://jsfiddle.net/w9RbW/10/

// Have the clear icon in there all the time
$("<span class='keypress'><i class='icon-remove-sign'></i></span>").appendTo($(".searchInput").parent()); 

$(".keypress").click(function(e) {
  if($(this).css('opacity') == 0) return;
  $(".searchInput").val("").focus();
  $(this).css('opacity', '0'); // hide it after clearing the text
})

// focusout
$(".searchInput").blur(function(e) {
  $(".keypress").css('opacity', '0'); // hide it on blur
})

$(".searchInput").focus(function() {
  if ($(".searchInput").val() != "") {
    $(".keypress").css('opacity', '1'); // show it
  }
})

$(".searchInput").keyup(function() {
  if($(this).val() != "") {
    $(".keypress").css('opacity', '1');
  } else {
    $(".keypress").css('opacity', '0');
  }
})
于 2013-01-16T16:16:29.727 に答える
0

回避策として、アイコンのマウスオーバー/アウトでいくつかのフラグを設定/削除し、focusout イベントでチェックすることができます。

于 2013-01-16T16:16:19.910 に答える