Событие запускается при очистке ввода текста в IE10 с четким значком

В хроме, событие "поиска" запускается на входах поиска, когда пользователь нажимает кнопку очистки.

Есть ли способ захватить одно и то же событие в javascript в Internet Explorer 10?

enter image description here

Ответ 1

Единственное решение, которое я нашел:

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

Ответ 2

Событие oninput срабатывает с this.value, установленным в пустую строку. Это решило проблему для меня, так как я хочу выполнить одно и то же действие: очищают ли они окно поиска с помощью X или путем обратного хода. Это работает только в IE 10.

Ответ 3

Используйте input вместо этого. Он работает с одинаковым поведением во всех браузерах.

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

Ответ 4

Почему бы не

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

Ответ 5

Я понимаю, что на этот вопрос был дан ответ, но принятый ответ не сработал в нашей ситуации. IE10 не распознал/не сработал оператор $input.trigger("cleared");.

Наше окончательное решение заменило этот оператор событием keydown на клавише ENTER (код 13). Для потомков это то, что работало в нашем случае:

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

Кроме того, мы хотели применить эту привязку только к входам "поиск", а не ко всем входам на странице. Естественно, IE тоже усложнил... хотя мы кодировали <input type="search"...>, IE отображали их как type="text". Поэтому селектор jQuery ссылается на type="text".

Ура!

Ответ 6

Мы можем просто прослушать событие input. Подробнее см. ссылку. Вот как я исправил проблему с кнопкой Clear в Sencha ExtJS на 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
        });
    }
});

Ответ 7

для моего управления сервером 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

Событие обмена MSDN - протестирован в IE10.

... или скрыть с помощью CSS:

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

Ответ 8

Вышеприведенный код не работал в моем случае, и я изменил одну строку и представил $input.typeahead('val', '');, который работает в моем случае..

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