Internet Explorer 10 not triggering the 'input' event when selecting an option from the datalist

Question

Internet Explorer 10 not triggering the 'input' event when selecting an option from the datalist

Within this particular scenario, there is an input field paired with a corresponding datalist element. My aim is to develop JavaScript code that actively listens for when a user chooses an item from the list. Most resources suggest utilizing the "input" event handler for this task, and in browsers like Chrome and Firefox it functions seamlessly. However, Internet Explorer presents a challenge.

In IE10, I have observed the following behavior:

Tapping into the field triggers the event.
The event does not trigger upon initial selection of an item from the datalist.
Re-selecting the same option successfully fires the event.

To demonstrate, here's a test:

https://i.stack.imgur.com/f7Eqn.gif

$('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>

If anyone has any insights on how I can compel Internet Explorer to trigger the desired event (or any event) so that I may execute a function upon user selection, I would greatly appreciate it.

javascript internet-explorer-10 dom-events html-datalist

Answer 1

Answer №1

Encountered the same issue on IE11 with a custom autocomplete list inspired by https://www.w3schools.com/howto/howto_js_autocomplete.asp

After some testing, it became apparent that IE11 was triggering the input event when clicking away from the input box (losing focus), contrary to other browsers that only fired this event upon text entry.

The workaround involved implementing a check for changes in the input value specifically for 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
};

Additionally, in IE, there's an issue with the clear button ('x') on text input fields not triggering an input event with the provided code. To address this, you could either a) hide the clear button using CSS:

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

or b) adjust the code to store the value of prev in a data-prev attribute or a global variable and update it whenever the input form value changes (such as selecting from the autocomplete list/datalist). This modification would ensure the event fires upon clicking the clear button since the prev value (val) will differ from the curr value ('') when clearing the field.

Hopefully, this information proves helpful!

Answer 2

Encountered the same issue on IE11 with a custom autocomplete list inspired by https://www.w3schools.com/howto/howto_js_autocomplete.asp

After some testing, it became apparent that IE11 was triggering the input event when clicking away from the input box (losing focus), contrary to other browsers that only fired this event upon text entry.

The workaround involved implementing a check for changes in the input value specifically for 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
};

Additionally, in IE, there's an issue with the clear button ('x') on text input fields not triggering an input event with the provided code. To address this, you could either a) hide the clear button using CSS:

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

or b) adjust the code to store the value of prev in a data-prev attribute or a global variable and update it whenever the input form value changes (such as selecting from the autocomplete list/datalist). This modification would ensure the event fires upon clicking the clear button since the prev value (val) will differ from the curr value ('') when clearing the field.

Hopefully, this information proves helpful!

Internet Explorer 10 not triggering the 'input' event when selecting an option from the datalist

Answer №1

Similar questions

The variable is unable to transfer successfully from JavaScript to PHP using ajax

Toggle the backgroundImage visibility by setting it to either hidden or displayed using jquery

I'm just getting started: an image carousel featuring a unique twist with random quote overlays, but there's a catch - it only activates on the very first image... what comes next?

An issue has arisen with loading chunks in Ionic 5/Angular, possibly due to an un

Obtain redirected JSON data locally using Angular 5

Show the div just one time

Why is IE waiting to load XML content until I access Developer tools?

React: Avoid the visible display of conditional rendering component fluctuations

Preventing PCs from accessing a specific webpage: A step-by-step guide

Capture the response from an AJAX request and store it in a JavaScript variable

Using a union type annotation when passing into knex will result in the return of an unspecified

Ways to navigate through a webpage without encountering any overflow issues

Tips for declaring a particular type during the process of destructuring in Typescript

A more efficient method for passing a function as an argument using the keyword "this"

To ensure that quotes are correctly handled in a string being passed to a JavaScript function within an `onclick`

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

What are the common issues with Angular 2's ng-if directive?

Implementing custom CSS styles for HighCharts API pie chart drilldown labels

how to handle form submission using JavaScript's return method

The success function of the Ajax request remains untouched by the response