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

154

HTML5では、search入力タイプの右側に小さなXが表示され、テキストボックスがクリアされます（少なくともChromeでは、おそらく他のものでも）。このXがJavaScriptまたはjQueryでクリックされたことを検出する方法はありません。たとえば、ボックスがまったくクリックされたことを検出したり、何らかの場所のクリック検出（x位置/ y位置）を実行したりする方法はありますか？

javascript  jquery  html  events  dom-events 
— ジェイソン
ソース
HTML 5についてはあまり知りませんが、onchangeイベントはありませんか？
— ペッカ
1
まあ、検索ボックスは、そのようにクリアされている場合は、把握できたが、それは選択と削除対そのボタンをクリックすることに起因する発生していないかどうか
— mVChr
— Naftali別名Neal
可能な回答stackoverflow.com/a/59389615/11973798効果があるかどうかを確認してください
— Shubham Khare
あなたは... keyUpイベントの追加やイベントを検索しなければならない
— ブラクÖztürk

回答:

104

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

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

参照：

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

— パウアン
ソース
2
ありがとう、search「x」をクリックしたとき以外にイベントが発生したときを理解できません。keyup、blurまたはフォームが送信されたときに発火しないようです。しかし、これは答えとしてマークされるに値します。
— Maksim Vi。
4
searchユーザーが押したときにイベントが発生しなければなりませんEnter。また、検索ボックスにincremental属性がある場合は、ユーザーが1秒間入力を停止したときにも起動します。
— Pauan
6
参考：このコメントの執筆時点では、これはChromeでのみ機能します。
— Jason
4
IE11はinputイベントをトリガーしますが、イベントはトリガーしませんsearch。
— ジョセフレノックス
1
「検索」イベントは非標準です。参照してくださいこれを。ポリフィルなしでの使用はお勧めしません。
— rstackhouse
59

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

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});
— シャラド・ビラダル
ソース
1
これは、不明な点に対する正解です
— Erik Grosskurth
6
Chromeでサポートされているが、IEまたはFFではサポートされていない検索イベントがあり、MDNによると、非標準機能であり、標準トラックにはない検索イベントがあります。developer.mozilla.org/en-US/docs/Web/Events/search
— リッチフィネッリ16
50

私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回呼び出されました（1つはkeyup、1つはchange）。

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

結論？input代わりに使用：

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

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

— ロレンツォデマッテ
ソース
1
ロレンゾに感謝します...これはとても役に立ちました。
— スターリングボーン
2
すごい、単に素晴らしい。多くの感謝が私にこれを理解しようとする時間を節約しました。
— user2029541
それ以来、Firefoxの動作が変わったようです。私はFirefox 42.0でテストしましたが、これはchangeイベントをChromeと同じように扱い、Enterまたはフォーカスが失われたときにのみ発火します。
— Suzana
入力オプションが好き...いいね！
— Cam Tullos 2017
14

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

<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>
— グーテンベルク
ソース
5
私にとって、changeイベントはblur基本的には発生しません。(x)Chromeの検索フィールドの内側をクリックするだけでは、イベントが発生しないようです。さらなる調査の後（そして以下のコメントを読んだ後）、私はclick私のために働くようになりました。だから$("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });私の側でうまくいく
— Jannis
2
ただし$("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });、ユーザーが入力フィールドをクリックしたときにもトリガーされます。
— スコット
8

これは古い質問であることは知っていますが、同じようなことを探していました。検索ボックスをクリアするために「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);
});
— lostInTheTetons
ソース
5

Xをクリックすることは変更イベントとして数えられるべきだと私には理解できました。onChangeイベントはすべて、必要なことを実行するためにすべて設定されています。したがって、私にとっての修正は、このjQuery行を単に実行することでした。

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

— コリー・ガリアルディ
ソース
クリアボタンが押されたときにトリガーにこれをしたい場合は、また、入力の値のチェックを追加することができ、以下のJannis'はコメントALA：stackoverflow.com/questions/2977023/... if (this.value === "") { ... }
— サム・
4

ブラウザでこれにアクセスできるようではないようです。検索入力は、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
  }
});
— mVChr
ソース
まあ、それは吸う。多分私は入力が空になったときにイベントonClickを実行したプランBに行くでしょう...多分それを25msタイマーに置きます
— Jason
@Jasonええ、上に置いたコードを使用して、Xがある領域でクリックが発生した場合にのみ実行できます。それはあなたが言ったように入力が空であるかどうかをチェックすることに加えて十分であるべきです
— mVChr
1

この投稿を見つけて、少し古いことに気づきましたが、答えがあると思います。これは、十字のクリック、バックスペース、および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 = "";
    }
  });
});
— ScottG
ソース
filterValが定義されていないようです
— dlsso
1

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

$("input[name=search-mini]").on("search", function() {
  //do something for search
});
— ドン・ザヌラノ
ソース
1

これが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の回答）をチェックすることで機能します。

— dlsso
ソース
1

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

検索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();  
    }
  }
});

乾杯。

— タランディープシン
ソース
1

jsのイベントループに基づいて、clickon clearボタンは入力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イベントをトリガーしたかどうかを判断できます。

これは、ほとんどすべての条件、貼り付けられたテキスト、インクリメンタル属性、ENTER / ESCキーの押下などで機能します。

— ジェームス・ヤン
ソース
1

これを実現する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 
document.querySelectorAll('input[type=search]').forEach(function (input) {
   input.addEventListener('mouseup', function (e) {
                if (input.value.length > 0) {
                    setTimeout(function () {
                        if (input.value.length === 0) {
                            //do reset action here
                        }
                    }, 5);
                }
            });
}

ECMASCRIPT 2016

— realmag777
ソース
0

検索またはonclickは機能しますが、私が見つけた問題は古いブラウザでした-検索が失敗しました。多くのプラグイン（jquery uiオートコンプリートまたはファンシーツリーフィルター）には、ぼかしとフォーカスのハンドラーがあります。これをオートコンプリート入力ボックスに追加するとうまくいきました（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);

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

— リチャード・デュフォー
ソース
-2

TextFieldの十字ボタン（X）をクリックすると、onmousemove（）が発生し、このイベントを使用して任意の関数を呼び出すことができます。

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
— プリヤランジャンサフー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.