web-dev-qa-db-de.com

Ereignis wird ausgelöst, wenn die Texteingabe am IE10 mit einem klaren Symbol gelöscht wird

In Chrome wird das "search" -Ereignis für Sucheingaben ausgelöst, wenn der Benutzer auf die Schaltfläche "Löschen" klickt.

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

enter image description here

javascripteventsinternet-explorer-10html-input
76
ghusse

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

Das Ereignis oninput wird ausgelöst, wobei this.value auf eine leere Zeichenfolge gesetzt ist. Dies löste das Problem für mich, da ich dieselbe Aktion ausführen möchte, unabhängig davon, ob sie das Suchfeld mit dem X oder durch Rücksetzen löschen. Dies funktioniert nur in IE 10.

40
Lucent

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

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

Warum nicht

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

Ich weiß, 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 für die EINGABETASTE (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 für die "search" -Eingaben anwenden, nicht für jeden Eingang auf der Seite. Natürlich hat IE dies auch schwierig gemacht ... Obwohl wir <input type="search"...> codiert hatten, hat IE sie als type="text" dargestellt. Deshalb verweist der jQuery-Selektor auf den type="text".

Prost!

8
OrangeWombat

Wir können uns einfach das input-Ereignis anhören. Bitte sehen Sie die Referenz für Details. So habe ich ein Problem mit der Clear-Taste 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
        });
    }
});
6
jaselg

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 - getestet im IE10.

... oder mit CSS verstecken:

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

Der obige Code funktionierte in meinem Fall nicht und ich habe eine Zeile geändert und $input.typeahead('val', ''); eingeführt, was 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);
});
0
Maneesh Thareja

Eine Standardlösung ist, das X einfach mit CSS loszuwerden:

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

Dies hat folgende Vorteile:

  1. Viel einfachere Lösung - passt auf eine Linie
  2. Gilt für alle Eingaben, sodass für jede Eingabe kein Handler erforderlich ist
  3. Kein Risiko, Javascript mit Fehler in der Logik zu brechen (weniger QS erforderlich)
  4. Standardisiert das Verhalten in allen Browsern - bewirkt, dass sich IE wie Chrome verhält, da Chrome das X nicht hat
0
Almenon