Zdarzenie uruchomione podczas czyszczenia wprowadzania tekstu w IE10 z ikoną wyczyszczenia


83

W przeglądarce Chrome zdarzenie „wyszukiwania” jest wywoływane przy wprowadzaniu wyszukiwania, gdy użytkownik kliknie przycisk wyczyść.

Czy istnieje sposób na zarejestrowanie tego samego zdarzenia w javascript w przeglądarce Internet Explorer 10?

wprowadź opis obrazu tutaj



Nie, ten dotyczy IE10. W webkicie wiem, jak sobie z tym poradzić.
ghusse

Podczas czyszczenia pola w IE10 nie ma żadnego zdarzenia.
wakooka

2
Hmm, może nadal warto spróbować, ale wygląda na to, że IE ma również błędne zdarzenie 'input': help.dottoro.com/ljhxklln.php (uruchamiane tylko po dodaniu tekstu, a nie po usunięciu!)
natevw

3
@ghusse zdarzenie „input” zostanie uruchomione.
kzh

Odpowiedzi:


72

Jedyne rozwiązanie, które w końcu znalazłem:

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

1
Dzięki Ghusse! Jeśli ktoś wymyśli inne rozwiązanie (bez setTimeout), daj mi znać.
He Nrik

Działa to również w przypadku ASP.NET / jQuery / IE11. Zamiast $ ("input"). Bind ("mouseup", function (e) {musisz użyć $ ('# <% = MyTextBox.ClientID%>'). Mouseup (function () {
Joe Schmoe

3
Poniższe rozwiązanie Lucenta działa dla mnie w IE11. Jego rozwiązaniem jest użycie oninputzdarzenia. Po naciśnięciu ikony X inputzdarzenie jest uruchamiane.
iheartcsharp

nie powinno być oświadczeniem if if (oldValue === "")?
Dylan Czenski

Chociaż rozwiązanie Lucenta z inputopcją -event działa, to rozwiązanie jest lepsze, ponieważ uruchamia się tylko wtedy, gdy element został wyczyszczony, podczas gdy Lucent uruchamia się również, gdy kursor wchodzi do elementu, opuszcza element, a także po wprowadzeniu danych.
spheenik

40

oninputWydarzenie wystrzeliwuje z this.valuezestawem do pustego łańcucha. To rozwiązało problem, ponieważ chcę wykonać tę samą akcję, niezależnie od tego, czy wyczyszczą pole wyszukiwania za pomocą znaku X, czy cofając. Działa to tylko w IE 10.


1
to działa również dla mnie w IE10, nie myśl, że wcześniejsze wersje na IE mają przycisk wyraźnego pola, więc powinno działać tylko dla IE10
andyface

3
Działa również w IE11!
AfroMogli

1
Działa to również w Chrome i Firefox, a także uruchamia się, gdy użytkownik kliknie prawym przyciskiem myszy i obniży wartość. Zahaczyć użyć tego: inputEl.addEventListener('input', function(){ /* DoSomething */ }).
Derek

32

Użyj inputzamiast tego. Działa z tym samym zachowaniem we wszystkich przeglądarkach.

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

1
Nie działa w IE 11 w trybie dokumentu 5, brak nawiasu zamykającego, przy okazji.
Bernhard Döbler

10

Dlaczego nie

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

1
A co, jeśli użytkownik po prostu usunął jakiś tekst za pomocą klawiatury?
ghusse

@ghusse Możesz także wyczyścić pole tekstowe, klikając i przeciągając, bez używania tego przycisku. Tak przyjęta odpowiedź również się nie powiedzie. Wydaje mi się, że OP zadał to pytanie, ponieważ gdy użytkownik naciśnie przycisk czyszczenia pola, chce zostać powiadomiony o zdarzeniu.
Ertug

Klikając i przeciągając, nie widzę, jak wyczyścić pole tekstowe, z wyjątkiem naciśnięcia przycisku del na klawiaturze.
ghusse

@ghusse Zaznacz cały tekst i spróbuj przeciągnąć go do innego pola tekstowego. Jeśli to nie działa, spróbuj z wciśniętym klawiszem Alt.
Ertug

wydaje się, że jest to lepsza odpowiedź na koniec dnia, choć może nie w 100% specyficzna dla pytania. Wydaje się, że obejmuje wszystkie rodzaje przypadków, nawet automatyczne uzupełnienia z chromu.
AR

8

Zdaję sobie sprawę, że udzielono odpowiedzi na to pytanie, ale zaakceptowana odpowiedź nie zadziałała w naszej sytuacji. IE10 nie rozpoznał / nie odpalił $input.trigger("cleared");oświadczenia.

Nasze ostateczne rozwiązanie zastąpiło tę instrukcję zdarzeniem keydown na klawiszu ENTER (kod 13). Dla potomnych to właśnie zadziałało w naszym przypadku:

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

Ponadto chcieliśmy zastosować to powiązanie tylko do danych wejściowych „wyszukiwania”, a nie do wszystkich danych wejściowych na stronie. Oczywiście IE również to utrudniało ... chociaż zakodowaliśmy<input type="search"...> je jako type="text". Dlatego selektor jQuery odwołuje się do type="text".

Twoje zdrowie!


genialny, zadziałał dla mnie, chociaż zamiast tego uruchomiłem keyup (mój kod szuka 2 znaków i automatycznie wyszukuje po keyup)
punkologist

6

Możemy po prostu posłuchać inputwydarzenia. Szczegółowe informacje można znaleźć w referencji . Oto jak naprawiłem problem z przyciskiem Clear w Sencha ExtJS na IE:

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

1
Ta odpowiedź działa w MS Edge, zdarzenie „input” jest wywoływane po kliknięciu „x” w celu wyczyszczenia pola wyszukiwania.
Mottie

Używam vanilla js, a MS Edge nie uruchamia zdarzenia input po kliknięciu X. Myślę, że i tak był to zły pomysł, aby spróbować obejrzeć takie wydarzenie. Lepiej użyj przycisku, takiego jak zwykłe formularze.
Rivenfall

2

Prostym rozwiązaniem jest pozbycie się X całkowicie za pomocą CSS:

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

Ma to następujące zalety:

  1. Dużo prostsze rozwiązanie - mieści się w jednej linii
  2. Dotyczy wszystkich danych wejściowych, więc nie musisz mieć procedury obsługi dla każdego wejścia
  3. Brak ryzyka złamania javascript z błędem w logice (wymagana mniejsza kontrola jakości)
  4. Standaryzuje zachowanie w różnych przeglądarkach - sprawia, że ​​IE zachowuje się tak samo jak chrome, w tym chrome nie ma X

1

dla mojego formantu serwera 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

Zdarzenie wymiany MSDN - testowane w IE10.

... lub ukryć za pomocą CSS:

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

0

Powyższy kod nie działał w moim przypadku i zmieniłem jedną linię i wprowadziłem $input.typeahead('val', '');co działa w moim przypadku ..

// 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);
});
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.