Событие срабатывает при очистке ввода текста в IE10 с помощью значка очистки

83

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

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

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

гусс
источник
1
Возможный дубликат: stackoverflow.com/questions/2492722/…
wakooka
Нет, это все про IE10. В webkit я знаю, как с этим справиться.
ghusse
При очистке поля в IE10 не запускается событие.
wakooka
2
Хм, может все же стоит попробовать, но похоже, что IE также имеет ошибочное событие 'input': help.dottoro.com/ljhxklln.php (запускается только при добавлении текста, а не при удалении!)
natevw
3
@ghusse запускается событие input.
kzh

Ответы:

72

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

// 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);
});
гусс
источник
1
Спасибо Гусс! Если кто-то предложит другое решение (без setTimeout), дайте мне знать.
He Nrik 06
Это также работает для ASP.NET / jQuery / IE11. Вместо $ ("input"). Bind ("mouseup", function (e) {нужно использовать $ ('# <% = MyTextBox.ClientID%>'). Mouseup (function () {
Джо Шмо,
3
Решение Lucent ниже работает для меня в IE11. Его решение - использовать oninputвместо этого событие. Когда вы нажимаете значок X, inputсобытие запускается.
iheartcsharp
не должно быть оператора if if (oldValue === "")?
Дилан Ченски 01
Хотя решение Lucent с input-event работает, это решение превосходит его тем, что оно срабатывает только тогда, когда элемент был очищен, в то время как Lucent также срабатывает, когда курсор входит в элемент, покидает элемент, а также когда данные были введены.
spheenik
40

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

Lucent
источник
1
это работает и для меня в IE10, не думаю, что в более ранних версиях IE есть кнопка с чистым полем, поэтому должно работать только для
IE10
3
Также работает в IE11!
AfroMogli
1
Это также работает в Chrome и Firefox, а также срабатывает, когда пользователь щелкает правой кнопкой мыши и сокращает значение. Для подключения использовать этот: inputEl.addEventListener('input', function(){ /* DoSomething */ }).
Дерек
32

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

$(some-input).on("input", function() { 
    // update panel
});
Джеффри Уренья Миранда
источник
1
Не работает в IE 11 в режиме документа 5, закрывающая скобка отсутствует, кстати.
Бернхард Дёблер
10

Почему бы и нет

$("input").bind('input propertychange', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});
Эртуг
источник
1
Что, если пользователь просто уберет текст с клавиатуры?
ghusse
@ghusse Вы также можете очистить текстовое поле щелчком и перетаскиванием без использования этой кнопки. Таким образом, принятый ответ также потерпит неудачу. Я предполагаю, что OP задал вопрос, потому что, когда пользователь нажимает кнопку очистки поля, он хочет получить уведомление о событии.
Ertug
Щелчком и перетаскиванием я не вижу, как очистить текстовое поле, кроме как нажатием кнопки del на клавиатуре.
ghusse
@ghusse Пожалуйста, выделите весь текст и попробуйте перетащить его в другое текстовое поле. Если это не работает, попробуйте нажать клавишу Alt.
Ertug
Кажется, что это лучший ответ в конце концов, хотя, возможно, не на 100% конкретный для вопроса. Вроде покрывает все виды корпусов, даже автокомплекты из хрома.
AR
8

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

Ура!

ОранжевыйВомбат
источник
блестяще, сработало для меня, хотя вместо этого я запустил клавиатуру (мой код ищет 2 символа и автоматически ищет по клавиатуре)
punkologist
6

Мы можем просто послушать 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
источник
1
Этот ответ работает для MS Edge, событие «input» запускается при нажатии «x», чтобы очистить поле поиска.
Mottie
Я использую vanilla js, и MS Edge не запускает событие ввода при нажатии X. Я думаю, что в любом случае было плохой идеей пытаться наблюдать такое событие. Лучше использовать кнопку, как обычные формы.
Rivenfall
2

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

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

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

  1. Намного более простое решение - умещается на одной линии
  2. Применяется ко всем входам, поэтому вам не нужно иметь обработчик для каждого входа
  3. Отсутствие риска поломки javascript с ошибкой в ​​логике (требуется меньше контроля качества)
  4. Стандартизирует поведение в браузерах - заставляет IE вести себя так же, как Chrome, в этом Chrome нет X
Альменон
источник
1

для моего управления сервером 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; }
гореть
источник
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);
});
Маниш Тареджа
источник