JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<p id="version"></p>
        <input id="input" type="text"/>
        <p>Instructions (IE):
            <ol>
                <li>Click on the page background</li>
                <li>Click in the input textbox</li>
                <li>Type a couple of characters</li>
                <li>Hit Enter - change ONLY fires</li>
                <li>Hit Enter again - keydown fires</li>
            </ol>
        </p>
        <p id="enter" style="display:none; padding:4px; color:white; background-color:green;">document received ENTER keydown event</p>
        <p id="change" style="display:none; padding:4px; color:white; background-color:red;">input received change event</p>

JavaScript

// #6319 (IE)

$(function() {
    $("#version").text("Using jQuery " + $(document).jquery);
    $(document).keydown(function(evt) { 
        if (evt.keyCode == 13) $("#enter").stop().fadeIn(0).fadeOut(2000);
    });
    $("#input").bind("change", function(evt) {
        $("#change").stop().fadeIn(0).fadeOut(2000);
        //if (evt.keyCode != 13) return; // this prevents the issue
        evt.stopPropagation();
    });
});