Подія спрацьовує під час очищення введення тексту на IE10 із піктограмою очищення

На chrome подія "пошук" запускається на вхідних даних пошуку, коли користувач натискає кнопку очищення.

Чи є спосіб зафіксувати ту саму подію в javascript в Internet Explorer 10?

Єдине рішення, яке я нарешті знайшов:

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

oninputПодія вистрілює з this.valueвстановленим в порожній рядок. Це вирішило проблему для мене, оскільки я хочу виконати одну і ту ж дію, незалежно від того, чи вони очищають поле пошуку за допомогою X або шляхом зворотного інтервалу. Це працює лише в IE 10.

Використовуйте inputзамість цього. Він працює з однаковою поведінкою у всіх браузерах.

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

Чому ні

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

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

Наше остаточне рішення замінило це твердження подією клавіатури на клавіші 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" .

На здоров’я!

Ми можемо просто послухати inputподію. Детальніше див . Посилання . Ось як я виправив проблему з кнопкою очищення в 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
        });
    }
});

Вихідне рішення - просто позбутися X повністю за допомогою CSS:

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

Це має наступні переваги:

1. Набагато простіше рішення - вміщується на одному рядку
2. Застосовується до всіх входів, тому вам не потрібно мати обробник для кожного вводу
3. Немає ризику зламати javascript із помилкою в логіці (потрібно менше контролю якості)
4. Стандартизує поведінку в браузерах - змушує IE поводитися так само, як chrome, оскільки chrome не має X

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

посилання

Подія MSDN onchange - перевірено в IE10.

... або приховати за допомогою CSS:

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

Наведений вище код не працював у моєму випадку, і я змінив один рядок і представив, $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);
});