18

type="search"Chrome などの一部のブラウザは、下の図に示すように、入力に追加の検索キャンセル ボタンを提供します。

通常、keyupユーザーが入力文字列を削除したかどうかをテストするには、追加のチェックで十分です (右クリックは考慮されません)。ただし、Webkit ブラウザーが提供する特別なキャンセル ボタンを使用してユーザーが入力をキャンセルした場合は、トリガーもトリガーもされkeyupません。change

キャンセルボタンの特別なイベントはありますか？または、既存のイベントのいずれかを確認する必要がありclickますか?

クロムのスクリーンショット

4

7 に答える 7

29

これにはイベントがあります: oninput.

ユーザー インターフェイスを介して要素のテキスト コンテンツが変更されたときに発生します。

oninput は、テキストエリア、input:text、input:password、または input:search 要素のコンテンツが変更されたことを検出する場合に便利です。これらの要素の onchange イベントは、変更直後ではなく、要素がフォーカスを失ったときに発生するためです。 .

これが実用的な例です。

$('#search').on('input', function(e) {
  if('' == this.value) {
    alert('Please enter a search criteria!');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" name="search" id="search" placeholder="Search..." />

于 2013-04-24T11:50:04.727 に答える
8

これにはイベントがあります: onsearch。

onsearch イベントを呼び出すアクション:

ENTER キーを押すか、検索コントロールの [検索テキストを消去] ボタンをクリックします。

次に例を示します。

HTML:

<input type="search" name="search" id="search" placeholder="Search..." />

jQuery:

$('#search').on('search', function(e) {
    if('' == this.value) {
        alert("You either clicked the X or you searched for nothing.");
    }
});
于 2013-04-24T12:34:59.527 に答える
0

これは、フォーカスされている間にフィールドを監視する oninput の代替です。

デモ

function tell(fld,id) {
    $("#"+id).html((fld.val()==""?"Clear":"Not clear")+" - "+new Date())
}
$(function() {
    $("#search").on("focus",function() {
        var srch = $(this);
        var tId = setInterval(function() { tell(srch,"status") },100);
        $(this).data("tId",tId);
    })
    .on("blur",function() {
        clearInterval($(this).data("tId"));
     });
    tell($("#search"),"status");
});
于 2013-04-24T12:02:59.193 に答える
0

最初、OPが考えていることが明らかではなかったとき<input type="search">（私が彼の心を読まなかったのはどれほどばかげているか）、それがおそらく答えだと思いました。

「x」は入力フィールドの標準部分ではないと思います（HTML5かどうか）。

おそらく外部から追加されたサイト要素であるため、この回答に興味があるかもしれません: https://stackoverflow.com/a/6258628/2107024

編集：

x調査の結果、Chromeをクリックするとイベントが発生することがわかりましたclick。また、この同様のスレッドの回答: 「検索」HTML5 入力のクリアをどのように検出しますか? searchイベントも発生することをお勧めします。

于 2013-04-24T11:49:20.497 に答える
0

Eric WarnkeがjQuery .keyup() vs .change() vs .bind()で示したように、bind を使用して複数のイベントをキャプチャできます。

Emre Erkanに基づいたフォークされたフィドルは次のとおりです。

$('#search').bind("change keyup input", function(e) {
    if('' == this.value) {
        alert('Please enter a search criteria!');
    }
});
于 2014-11-18T19:11:19.103 に答える