Ereignis beim Löschen der Texteingabe in IE10 mit Löschsymbol ausgelöst

Bei Chrome wird das Suchereignis bei Sucheingaben ausgelöst, wenn der Benutzer auf die Schaltfläche zum Löschen klickt.

Gibt es eine Möglichkeit, dasselbe Ereignis in Javascript in Internet Explorer 10 zu erfassen?

Die einzige Lösung, die ich endlich gefunden habe:

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

Das oninputEreignis wird ausgelöst, wenn this.valueeine leere Zeichenfolge festgelegt ist. Dies löste das Problem für mich, da ich die gleiche Aktion ausführen möchte, unabhängig davon, ob das Suchfeld mit dem X oder durch Rückraum gelöscht wird. Dies funktioniert nur in IE 10.

Verwenden Sie inputstattdessen. Es funktioniert mit dem gleichen Verhalten unter allen Browsern.

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

Warum nicht

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

Mir ist klar, dass diese Frage beantwortet wurde, aber die akzeptierte Antwort hat in unserer Situation nicht funktioniert. IE10 hat die $input.trigger("cleared");Anweisung nicht erkannt / ausgelöst .

Unsere endgültige Lösung ersetzte diese Anweisung durch ein Keydown-Ereignis auf der ENTER-Taste (Code 13). Für die Nachwelt hat dies in unserem Fall funktioniert:

$('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);
});

Außerdem wollten wir diese Bindung nur auf die "Suche" -Eingaben anwenden, nicht auf alle Eingaben auf der Seite. Natürlich hat IE dies auch schwierig gemacht ... obwohl wir codiert hatten <input type="search"...>, hat IE sie als gerendert type="text". Aus diesem Grund verweist der jQuery-Selektor auf den type="text".

Prost!

Wir können uns das inputEreignis einfach anhören . Einzelheiten entnehmen Sie bitte der Referenz . So habe ich ein Problem mit der Schaltfläche "Löschen" in Sencha ExtJS im IE behoben:

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

Eine sofort einsatzbereite Lösung besteht darin, das X mit CSS vollständig zu entfernen:

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

Dies hat folgende Vorteile:

1. Viel einfachere Lösung - passt in eine Zeile
2. Gilt für alle Eingaben, sodass Sie nicht für jede Eingabe einen Handler benötigen
3. Kein Risiko, Javascript mit einem Fehler in der Logik zu beschädigen (weniger Qualitätssicherung erforderlich)
4. Standardisiert das Verhalten zwischen Browsern - bewirkt, dass sich der IE wie Chrome verhält, da Chrome nicht über das X verfügt

für meine asp.net Serversteuerung

<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-Ereignis - in IE10 getestet.

... oder mit CSS verstecken:

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

Der obige Code funktionierte in meinem Fall nicht und ich habe eine Zeile geändert und eingeführt, $input.typeahead('val', '');welche in meinem Fall funktioniert.

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