web-dev-qa-db-ja.com

IE10でクリアアイコンを使用してテキスト入力をクリアするときに発生するイベント

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

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

enter image description here

javascripteventsinternet-explorer-10html-input
80
ghusse

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

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

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

40
Lucent

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

$(some-input).on("input", function() { 
    // update panel
});
28
Jeffry Ureña Miranda

何故なの

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

この質問には答えられましたが、受け入れられた答えは私たちの状況ではうまくいきませんでした。 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"を参照する理由です。

乾杯！

8
OrangeWombat

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

すぐに使えるソリューションは、CSSを使用してXを完全に削除することです。

::-ms-clear { display: none; } /* see https://stackoverflow.com/questions/14007655 */

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

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

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

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

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

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

上記のコードは私の場合は機能していなかったので、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);
});
0
Maneesh Thareja