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

82

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?

Geben Sie hier die Bildbeschreibung ein

Ghusse
quelle
1
Mögliches Duplikat: stackoverflow.com/questions/2492722/…
wakooka
Nein, hier dreht sich alles um IE10. Im Webkit weiß ich, wie ich damit umgehen soll.
Ghusse
In IE10 wird beim Löschen des Feldes kein Ereignis ausgelöst.
Wakooka
1
Hmm, könnte immer noch einen Versuch wert sein, aber es sieht so aus, als hätte der IE auch ein fehlerhaftes ' Eingabe' -Ereignis: help.dottoro.com/ljhxklln.php (wird nur ausgelöst, wenn Text hinzugefügt wird, nicht, wenn er entfernt wird!)
natevw
3
@ghusse Das 'Eingabe'-Ereignis wird ausgelöst.
kzh

Antworten:

71

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);
});
Ghusse
quelle
1
Danke Ghusse! Wenn jemand eine andere Lösung findet (ohne setTimeout), lassen Sie es mich wissen.
Er Nrik
Dies funktioniert auch für ASP.NET / jQuery / IE11. Anstelle von $ ("input"). Bind ("mouseup", Funktion (e) {müssen Sie $ ('# <% = MyTextBox.ClientID%>') verwenden. Mouseup (function () {
Joe Schmoe
3
Die Lösung von Lucent unten funktioniert für mich in IE11. Seine Lösung besteht darin, oninputstattdessen das Ereignis zu verwenden. Wenn Sie das X-Symbol drücken, wird das inputEreignis ausgelöst.
Iheartcsharp
sollte die if-Anweisung nicht sein if (oldValue === "")?
Dylan Czenski
Während die Lösung von Lucent mit dem inputEreignis -event funktioniert, ist diese Lösung insofern überlegen, als sie nur ausgelöst wird, wenn das Element gelöscht wurde, während Lucent auch ausgelöst wird, wenn der Cursor in das Element eintritt, das Element verlässt und auch wenn Daten eingegeben wurden.
Spheenik
40

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.

Lucent
quelle
1
Dies funktioniert auch für mich in IE10. Denken Sie nicht, dass frühere Versionen in IE eine Schaltfläche zum Löschen von
Feldern haben. Sie
3
Funktioniert auch in IE11!
AfroMogli
1
Dies funktioniert auch in Chrome und Firefox und wird auch ausgelöst, wenn der Benutzer mit der rechten Maustaste klickt und den Wert schneidet. Verwenden Sie zum Anschließen Folgendes : inputEl.addEventListener('input', function(){ /* DoSomething */ }).
Derek
31

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

$(some-input).on("input", function() { 
    // update panel
});
Jeffry Ureña Miranda
quelle
1
Funktioniert nicht in IE 11 im Dokumentmodus 5, schließende Klammer fehlt übrigens.
Bernhard Döbler
10

Warum nicht

$("input").bind('input propertychange', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});
Ertug
quelle
1
Was ist, wenn der Benutzer einfach Text mit seiner Tastatur entfernt hat?
Ghusse
@ghusse Sie können ein Textfeld auch mit einem Klick und Ziehen löschen, ohne diese Schaltfläche zu verwenden. So akzeptierte Antwort wird auch scheitern. Ich denke, OP hat die Frage gestellt, weil ein Benutzer, wenn er die Schaltfläche zum Löschen des Feldes drückt, über ein Ereignis benachrichtigt werden möchte.
Ertug
Mit einem Klick und einem Ziehen kann ich nur durch Drücken der Entf-Taste auf Ihrer Tastatur sehen, wie ein Textfeld gelöscht wird.
Ghusse
@ghusse Bitte wählen Sie den gesamten Text aus und versuchen Sie, ihn in ein anderes Textfeld zu ziehen. Wenn dies bei Ihnen nicht funktioniert, drücken Sie die Alt-Taste.
Ertug
Dies scheint die bessere Antwort am Ende des Tages zu sein, obwohl sie möglicherweise nicht zu 100% spezifisch für die Frage ist. Scheint alle Arten von Fällen abzudecken, sogar automatische Vervollständigungen aus Chrom.
AR
8

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!

OrangeWombat
quelle
Genial, hat für mich funktioniert, obwohl ich stattdessen Keyup ausgelöst habe (mein Code sucht nach 2 Zeichen und sucht automatisch nach Keyup)
Punkologe
6

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
        });
    }
});
Jaselg
quelle
1
Diese Antwort funktioniert für MS Edge. Das Ereignis "Eingabe" wird ausgelöst, wenn Sie auf "x" klicken, um das Suchfeld zu löschen.
Mottie
Ich verwende Vanilla Js und MS Edge löst das Eingabeereignis nicht aus, wenn Sie auf das X klicken. Ich denke, es war sowieso eine schlechte Idee, zu versuchen, ein solches Ereignis zu sehen. Verwenden Sie besser eine Schaltfläche wie bei normalen Formularen.
Rivenfall
2

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
Almenon
quelle
1

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; }
in Flammen
quelle
0

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);
});
Maneesh Thareja
quelle