web-dev-qa-db-ja.com

「検索」HTML5入力のクリアをどのように検出しますか？

HTML5では、search入力タイプの右側に小さなXが表示され、テキストボックスがクリアされます（少なくともChromeでは、おそらく他の場合）。このXがjavascriptまたはjQueryでクリックされたことを検出する方法はありますか？

javascriptjqueryeventsjavascript-eventshtml5
126
Jason

実際には、ユーザーが検索するたびに、またはユーザーが「x」をクリックしたときに発生する「search」イベントがあります。これは、「増分」属性を理解するため、特に便利です。

そうは言っても、「onclick」ハックを使用しない限り、「x」をクリックすることと検索することの違いがわかるかどうかはわかりません。いずれにせよ、うまくいけばこれが助けになるでしょう。

参照：

http://help.dottoro.com/ljdvxmhr.php

88
Pauan

バインドsearch-以下に示すように検索ボックスをイベントにします-

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});
46
Sharad Biradar

今日はchange、keyup、およびsearchに苦労したので、「遅い」答えを追加したいと思います。基本的に、タイプ検索パネルがあり、小さなX（ChromeおよびOperaの下では、FFは実装していません）に適切に反応し、コンテンツペインをクリアしたかっただけです。結果として。

私はこのコードを持っていました：

 $(some-input).keyup(function() { 
    // update panel
 }
 $(some-input).change(function() { 
    // update panel
 }
 $(some-input).on("search", function() { 
    // update panel
 }

（それぞれがいつどのような状況で呼び出されたかを確認したかったため、これらは分離されています）。

ChromeとFirefoxの反応は異なります。特に、Firefoxはchangeを「入力へのすべての変更」として扱い、Chromeは「フォーカスが失われ、コンテンツが変更されたとき」として扱います。そのため、Chromeでは「更新パネル」関数が1回呼び出され、FFではキーストロークごとに2回呼び出されました（keyupに1つ、changeに1つ）

さらに、小さなX（FFには存在しない）でフィールドをクリアすると、Chromeの下でsearchイベントが発生しました：no keyup、no change。

結論？代わりにinputを使用します。

 $(some-input).on("input", function() { 
    // update panel
 }

私がテストしたすべてのブラウザーで同じ動作をし、入力コンテンツ（マウスでのコピー、貼り付け、オートコンプリート、「X」を含む）のすべての変更に反応します。

41
Lorenzo Dematté

パウアンの応答を使用すると、ほとんど可能です。例.

<head>
    <script type="text/javascript">
        function OnSearch(input) {
            if(input.value == "") {
                alert("You either clicked the X or you searched for nothing.");
            }
            else {
                alert("You searched for " + input.value);
            }
        }
    </script>
</head>
<body>
    Please specify the text you want to find and press ENTER!
    <input type="search" name="search" onsearch="OnSearch(this)"/>
</body>
14
ggutenberg

Xをクリックすると変更イベントとしてカウントされるはずだということは、私にとって理にかなっています。既に必要なことを行うために、すべてのセットアップでonChangeイベントがありました。だから私にとって、修正は単にこのjQuery行を行うことでした：

$('#search').click(function(){ $(this).change(); });

5
Cory Gagliardi

これは古い質問ですが、似たようなものを探していました。検索ボックスをクリアするために「X」がクリックされた時期を判別します。ここでの答えはどれも私をまったく助けませんでした。 1つは近くにありましたが、ユーザーが「Enter」ボタンを押すと影響を受け、「X」をクリックした場合と同じ結果が発生しました。

この回答は別の投稿で見つけましたが、私にとっては完璧に機能し、ユーザーが検索ボックスをクリアしたときにのみ起動します。

$("input").bind("mouseup", function(e){
   var $input = $(this),
   oldValue = $input.val();

   if (oldValue == "") return;

   // When this event is fired after clicking on the clear button
   // the value is not cleared yet. We have to wait for it.
   setTimeout(function(){
     var newValue = $input.val();

      if (newValue == ""){
         // capture the clear
         $input.trigger("cleared");
      }
    }, 1);
});
4
lostInTheTetons

ブラウザでこれにアクセスできるようには見えません。検索入力は、Cocoa NSSearchFieldのWebkit HTMLラッパーです。キャンセルボタンは、ブラウザクライアントコード内に含まれているようで、ラッパーから利用可能な外部参照はありません。

ソース：

次のようなものでクリックするとマウスの位置からそれを把握する必要があるように見えます：

$('input[type=search]').bind('click', function(e) {
  var $earch = $(this);
  var offset = $earch.offset();

  if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
    // your code here
  }
});
4
mVChr

これを実現する1つの方法を次に示します。 HTMLにインクリメンタル属性を追加する必要があります。追加しないと機能しません。

window.onload = function() {
  var tf = document.getElementById('textField');
  var button = document.getElementById('b');
  button.disabled = true;
  var onKeyChange = function textChange() {
    button.disabled = (tf.value === "") ? true : false;
  }
  tf.addEventListener('keyup', onKeyChange);
  tf.addEventListener('search', onKeyChange);

}
<input id="textField" type="search" placeholder="search" incremental="incremental">
<button id="b">Go!</button>
1
Revanth

この投稿を見つけて、少し古いことを知っていますが、私は思考答えがあるかもしれません。これは、十字のクリックを処理し、バックスペースを取り、ESCキーを押します。私はそれがおそらくより良く書かれていると確信しています-私はまだJavaScriptに比較的新しいです。これが私がやったことです-私はjQuery（v1.6.4）を使用しています：

var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
  $("input[type=search]").keyup(function(e) {
    if (e.which == 27) {  // catch ESC key and clear input
      $(this).val('');
    }
    if (($(this).val() === "" && searchVal != "") || e.which == 27) {
      // do something
      searchVal = "";
    }
    searchVal = $(this).val();
  });
  $("input[type=search]").click(function() {
    if ($(this).val() != filterVal) {
      // do something
      searchVal = "";
    }
  });
});
1
ScottG

これを試して、あなたを助けることを願って

$("input[name=search-mini]").on("search", function() {
  //do something for search
});
1
Don Zanurano

完全なソリューションはこちら

これにより、検索xがクリックされたときに検索がクリアされます。または、ユーザーがEnterキーを押したときに検索APIヒットを呼び出します。このコードは、追加のescキーアップイベントマッチャーでさらに拡張できます。しかし、これはすべてを行う必要があります。

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

乾杯。

0
Tarandeep Singh

検索またはonclickは機能します...しかし、私が見つけた問題は古いブラウザにありました-検索は失敗します。多くのプラグイン（jquery uiオートコンプリートまたはfancytreeフィルター）には、ぼかしおよびフォーカスハンドラーがあります。これをオートコンプリート入力ボックスに追加すると、私にとってはうまくいきました（評価が速くなったため、this.value == ""を使用しました）。ぼかしは、小さな「x」を押すとカーソルがボックス内に収まるようにしました。

PropertyChangeと入力は、IE 10とIE 8の両方、および他のブラウザーで機能しました。

$("#INPUTID").on("propertychange input", function(e) { 
    if (this.value == "") $(this).blur().focus(); 
});

FancyTreeフィルター拡張では、次のようにリセットボタンを使用して、クリックイベントを強制できます。

var TheFancyTree = $("#FancyTreeID").fancytree("getTree");

$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
    var n,
    leavesOnly = false,
    match = $(this).val();
    // check for the escape key or empty filter
    if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
        $("button#btnResetSearch").click();
        return;
    }

    n = SiteNavTree.filterNodes(function (node) {
        return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
        }, leavesOnly);

    $("button#btnResetSearch").attr("disabled", false);
    $("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();

// handle the reset and check for empty filter field... 
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
    if ($("input[name=FT_FilterINPUT]").val() != "")
        $("input[name=FT_FilterINPUT]").val("");
    $("span#SiteNavMatches").text("");
    SiteNavTree.clearFilter();
}).attr("disabled", true);

これをほとんどの用途に適応させることができるはずです。

0
Richard Dufour

jsのイベントループに基づいて、クリアボタンのclickがinputでsearchイベントをトリガーするため、以下のコードは期待どおりに機能します。

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

上記のコードonclickイベントはthis._cleared = falseイベントループを予約しましたが、イベントは常に実行されるonsearchイベントなので、安定してチェックできますthis._clearedステータス。ユーザーがXボタンをクリックしてからonsearchイベントをトリガーしたかどうかを判断します。

これはほとんどすべての条件、貼り付けられたテキスト、incremental属性、ENTER/ESCキーを押すなど.

0
James Yang

これはxがクリックされたときにのみ起動する唯一の答えだと思います。

しかし、それは少しハッキーであり、グーテンベルクの答えはほとんどの人に有効です。

$('#search-field').on('click', function(){
  $('#search-field').on('search', function(){
    if(!this.value){
      console.log("clicked x");
      // Put code you want to run on clear here
    }
  });
  setTimeout(function() {
    $('#search-field').off('search');
  }, 1);
});

'#search-field'は、入力用のjQueryセレクターです。 'input[type=search]'を使用して、すべての検索入力を選択します。フィールドをクリックした直後に検索イベント（Pauanの答え）をチェックすることで機能します。

0
dlsso