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

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?

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

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.

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

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

Dlaczego nie

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

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!

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

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

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

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