クリアアイコンでIE10のテキスト入力をクリアするとイベントが発生します

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

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

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

// 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);
});

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

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

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

何故なの

$("input").bind('input propertychange', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});

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

最終的なソリューションでは、そのステートメントをENTERキー（コード13）のkeydownイベントに置き換えました。後世のために、これは私たちの場合にうまくいったものです：

$('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"です。

乾杯！

inputイベントを聞くだけです。詳細については、リファレンスを参照してください。これは、IEのSenchaExtJSのクリアボタンの問題を修正した方法です。

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
        });
    }
});

すぐに使えるソリューションは、CSSでXを完全に取り除くことです。

::-ms-clear { display: none; } /* see /programming/14007655 */

これには次の利点があります。

1. はるかに簡単なソリューション-1行に収まる
2. すべての入力に適用されるため、入力ごとにハンドラーを用意する必要はありません。
3. ロジックのバグでJavaScriptを壊すリスクはありません（QAは必要ありません）
4. ブラウザ間の動作を標準化します-ChromeにはXがないという点で、IEはChromeと同じように動作します

私のasp.netサーバー制御用

<asp:TextBox ID="tbSearchName" runat="server" oninput="jsfun_tbSearchName_onchange();"></asp:TextBox>

js

function jsfun_tbSearchName_onchange() {
    if (objTbNameSearch.value.trim() == '')
            objBTSubmitSearch.setAttribute('disabled', true);
        else
            objBTSubmitSearch.removeAttribute('disabled');
        return false;
}

ref

MSDNonchangeイベント-IE10でテスト済み。

...またはCSSで非表示にする：

input[type=text]::-ms-clear { display: none; }

上記のコードは私の場合は機能していませんでした。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);
});