JSFiddle - React, Tailwind, and code Playground

by Michael Gunderson

HTML

<form id="testForm" method="get" action="">
    <ul>
        <li>#1: Enter "1234" into the box, and press enter. -> Notice 'Submitted!' text.</li>
        <li>#2: Press backspace, and then press tab. -> Notice 'Changed!' text.</li>
        <li>#3: Place caret at end of the text, and press 4, followed by enter. -> Notice 'Submitted!' text.</li>
        <li>#4: Press backspace, and then press tab. -> Notice 'Submitted!' text, when it should be 'Changed!'</li>
    </ul>
    <input id="testInput" type="text">
    <input id="testSubmit" type="submit" value="Submit">
    <div id="status"></div>
</form>

JavaScript

var $testSubmit = $('#testSubmit'), $testInput = $('#testInput'), $status = $('#status');
$testInput.on('change', function() {
    $status.html('Changed!');
    console.log('Change');
}).on('keypress', function(e) {
    if (e.which == 13) {
        e.preventDefault();
        $testSubmit.trigger('click');
    }
});
    
$testSubmit.on('click', function(e) {
    e.preventDefault();
    $status.html('Submitted!');
    console.log('Submit');
});