Internet Explorer 10 «вход» событие при выборе опции datalist не срабатывает - PullRequest
Новая
       59

Internet Explorer 10 «вход» событие при выборе опции datalist не срабатывает

0 голосов
/ 26 октября 2018

В следующем примере у меня есть поле ввода и соответствующий элемент списка данных.Я пытаюсь написать JavaScript, который прослушивает, когда пользователь выбирает элемент из списка.Я видел, что он предложил использовать для этого событие «input», и в Chrome, Firefox и т. Д. Все это работает.Проблема в интернет-проводнике.

В IE10 я получаю следующее поведение:

  • При вводе в поле запускается событие.
  • При выборе элемента из списка данных событие не запускается первый раз .
  • Повторный выбор этой же опции вызывает событие.

См. Тест:

enter image description here

$('input').on('input', function(){
    console.log($('input').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Есть ли у кого-нибудь какие-либо предложения о том, как заставить Internet Explorer запускать это (или любое) событие, чтобы я мог запускать функцию, когда пользователь делает выбор?

1 Ответ

0 голосов
/ 25 февраля 2019

Я столкнулся с той же проблемой в IE11 с пользовательским списком автозаполнения, созданным на основе этого: https://www.w3schools.com/howto/howto_js_autocomplete.asp

Некоторые тесты показали, что IE11 вызвал событие input при щелчке в поле ввода (т.е.когда теряю фокус).Предполагаемое поведение, как и в других браузерах, заключалось в том, чтобы запускать это событие только при вводе текста (включая возврат) в поле ввода.

Решением было проверить, изменилось ли значение ввода в IE, например так:

function inputEventGeneral(input, fn) { //input event for any browser
    if (checkBrowserIE()) {
        inputEventIE(input, fn);
    } else {
        input.addEventListener('input', function (e) { //normal input event for Chrome, FF, etc.
            fn(this); //run this function on input
        });
    };
};

function inputEventIE(input, fn) { //input event for IE
    let curr = '';
    let prev = '';

    input.addEventListener('input', function (e) {
        curr = this.value;

        if (prev === curr) { //check if value changed
            return;
        };

        prev = curr; //update value of prev

        fn(this); //run this function only if the value has been changed
    });
};


function checkBrowserIE() {
    return (/Trident/.test(navigator.userAgent)); //https://stackoverflow.com/questions/22004381/ie-input-event-for-contenteditable
};

В IE также существует проблема с кнопкой 'x' clear в поле ввода текста, которая не будет вызывать событие ввода при использовании вышеуказанного кода.Для этого вы можете либо а) просто скрыть эту кнопку очистки с помощью CSS, как показано ниже: 

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

, либо б) вы можете изменить приведенный выше код для сохранения значения prev в data-prevатрибут или глобальная переменная, а затем обновите его с любыми изменениями значения формы ввода (например, при выборе из списка автозаполнения / списка данных).Это приведет к тому, что событие будет вызвано нажатием кнопки очистки, поскольку значение prev ( val ) будет отличаться от значения curr ('') при очистке.

Надеюсь, это поможет!

...