Событие срабатывает при очистке ввода текста в IE10 с иконкой сброса

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

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

введите описание изображения здесь

76 голосов | спросил ghusse 24 Jpm1000000pmThu, 24 Jan 2013 13:55:24 +040013 2013, 13:55:24

8 ответов


0

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

ответил Lucent 21 AMpMon, 21 Apr 2014 08:54:47 +040054Monday 2014, 08:54:47
0

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

$(some-input).on("input", function() { 
    // update panel
});
ответил Jeffry Ureña Miranda 10 J0000006Europe/Moscow 2016, 18:57:01
0

Почему бы не

$("input").bind('input propertychange', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});
ответил Ertug 29 Jpm1000000pmThu, 29 Jan 2015 22:09:01 +030015 2015, 22:09:01
0

Я понимаю, что на этот вопрос ответили, но принятый ответ не сработал в нашей ситуации. 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".

Ура!

ответил OrangeWombat 9 PMpWed, 09 Apr 2014 21:01:10 +040001Wednesday 2014, 21:01:10
0

Мы можем просто прослушать событие 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
        });
    }
});
ответил jaselg 9 Jam1000000amFri, 09 Jan 2015 07:35:55 +030015 2015, 07:35:55
0

для управления сервером 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; }
ответил ablaze 15 Jpm1000000pmWed, 15 Jan 2014 22:47:08 +040014 2014, 22:47:08
0

Вышеупомянутый код не работал в моем случае, и я изменил одну строку и ввел $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);
});
ответил Maneesh Thareja 15 J000000Tuesday14 2014, 16:58:57
0

Готовое решение состоит в том, чтобы просто полностью избавиться от X с помощью CSS:

::-ms-clear { display: none; } /* see https://stackoverflow.com/questions/14007655 */

Это имеет следующие преимущества:

  1. Гораздо более простое решение - помещается в одну строку
  2. Применяется ко всем входам, поэтому вам не нужно иметь обработчик для каждого входа
  3. Нет риска взлома JavaScript с ошибкой в ​​логике (требуется меньше QA)
  4. Стандартизирует поведение в разных браузерах - заставляет IE вести себя так же, как chrome, поскольку в chrome отсутствует X
ответил Almenon 16 52018vEurope/Moscow11bEurope/MoscowFri, 16 Nov 2018 09:02:40 +0300 2018, 09:02:40

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132