84

Chromeでは、ユーザーがクリアボタンをクリックすると、検索入力で「検索」イベントが発生します。

Internet Explorer 10のJavaScriptで同じイベントをキャプチャする方法はありますか？

ここに画像の説明を入力してください

4

9 に答える 9

72

私が最終的に見つけた唯一の解決策：

// There are 2 events fired on input element when clicking on the clear button:
// mousedown and mouseup.
$("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 == ""){
      // Gotcha
      $input.trigger("cleared");
    }
  }, 1);
});
于 2013-01-24T10:20:51.887 に答える
40

oninputイベントは、空の文字列に設定this.valueして発生します。検索ボックスを X でクリアするか、バックスペースを使用してクリアするかに関係なく、同じアクションを実行したいので、これで問題は解決しました。これは IE 10 でのみ機能します。

于 2014-04-21T04:54:47.930 に答える
32

input代わりに使用してください。すべてのブラウザで同じ動作で動作します。

$(some-input).on("input", function() { 
    // update panel
});
于 2016-06-10T15:57:01.367 に答える
10

なぜだめですか

$("input").bind('input propertychange', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});
于 2015-01-29T19:09:01.377 に答える
8

この質問には回答済みですが、受け入れられた回答は私たちの状況では機能しませんでした。IE10 はステートメントを認識/起動しませんでした$input.trigger("cleared");。

私たちの最終的な解決策は、そのステートメントを ENTER キーのキーダウン イベント (コード 13) に置き換えました。後世のために、これは私たちの場合に機能したものです：

$('input[type="text"]').bind("mouseup", function(event) {
    var $input = $(this);
    var oldValue = $input.val();
    if (oldValue == "") {
        return;
    }
    setTimeout(function() {
        var newValue = $input.val();
        if (newValue == "") {
            var enterEvent = $.Event("keydown");
            enterEvent.which = 13;
            $input.trigger(enterEvent);
        }
    }, 1);
});

さらに、このバインディングをページ上のすべての入力ではなく、「検索」入力にのみ適用したいと考えました。当然、IE もこれを困難にしました... をコーディング<input type="search"...>しましたが、IE はそれらを としてレンダリングしましたtype="text"。そのため、jQuery セレクターはtype="text".

乾杯！

于 2014-04-09T17:01:10.507 に答える
6

inputイベントを聞くだけです。詳しくはリファレンスをご覧ください。これは、IE 上の Sencha ExtJS のクリア ボタンの問題を修正した方法です。

Ext.define('Override.Ext.form.field.ComboBox', {
    override: 'Ext.form.field.ComboBox',

    onRender: function () {
        this.callParent();

        var me = this;
        this.inputEl.dom.addEventListener('input', function () {
            // do things here
        });
    }
});
于 2015-01-09T04:35:55.320 に答える
0

私の場合、上記のコードは機能していませんでした.1行を変更$input.typeahead('val', '');して、私の場合に機能するものを紹介しました..

// There are 2 events fired on input element when clicking on the clear button:// mousedown and mouseup.
$("input").on('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 === ''){
            $input.typeahead('val', '');
            e.preventDefault();
        }
    }, 1);
});
于 2014-07-15T12:58:57.267 に答える