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?
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?
Odpowiedzi:
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); });
źródło
oninput
zdarzenia. Po naciśnięciu ikony Xinput
zdarzenie jest uruchamiane.if (oldValue === "")
?input
opcją -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.oninput
Wydarzenie wystrzeliwuje zthis.value
zestawem 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.źródło
inputEl.addEventListener('input', function(){ /* DoSomething */ })
.Użyj
input
zamiast tego. Działa z tym samym zachowaniem we wszystkich przeglądarkach.$(some-input).on("input", function() { // update panel });
źródło
Dlaczego nie
$("input").bind('input propertychange', function() { if (this.value == ""){ $input.trigger("cleared"); } });
źródło
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 jakotype="text"
. Dlatego selektor jQuery odwołuje się dotype="text"
.Twoje zdrowie!
źródło
Możemy po prostu posłuchać
input
wydarzenia. 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 }); } });
źródło
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:
źródło
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; }
źródło
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); });
źródło