Smarter forms in regards to ENTER key

Check this out:
https://stackoverflow.com/questions/8951...ting-enter

Thanks. It's an interesting thread, but very jQuery oriented. I try to use as much "pure JS" as possible. My main point was that I think this would be something quite a lot of people would want, and it'd be nice to have it as part of CI. I did roll my own code for this eventually. It looks something like this:

Code:

<!-- Start me up -->
<script {csp-script-nonce}>
  (() => {
        'use strict';

        var cancelButton_id = null;
        var visibleFieldCount = 0;
        var visibleFields = null;
        var theForm = null;
        var formInputs = null;
        var ourInputs = [];

        function focusNext() {
            let currentField = document.activeElement;
            let currentInputIndex = ourInputs.indexOf(currentField);
            currentInputIndex++;
            if (currentInputIndex >= ourInputs.length) {
                currentInputIndex = 0;
            }
            let input = ourInputs[currentInputIndex];
            input.focus();
        }
        function documentKeyDown(e) {
            if (e.defaultPrevented) {
                return;// already handled
            }
            if (e.key == "Enter") {
                if (e.metakey || e.ctrlKey) {
                    if (e.target.form == theForm) {
                        e.preventDefault();
                        HTMLFormElement.prototype.submit.call(theForm);
                        return;
                    }
                }
                if (e.target.nodeName && e.target.nodeName.toLowerCase() != 'textarea') {
                    e.preventDefault();
                    focusNext();
                }
            }
        }
        function documentEditSetup() {
            let initialField = document.getElementById('the-field-you-want-to-focus-auto');
            if (initialField) {
                initialField.focus();
            }
            theForm = document.getElementById('the-id-of-the-form');
            formInputs = Array.from(theForm.elements);
            formInputs.forEach((fi) => {
                let fiType = fi.type.toLowerCase();
                if ( ! fi.hidden && fiType != 'hidden' && fiType != 'submit' ) {
                    visibleFieldCount++;
                    ourInputs.push(fi);
                }
            });
            cancelButton_id = document.getElementById('cancel-button');
            window.addEventListener('keydown', documentKeyDown);
            window.addEventListener('keyup', (e) => {
                if (e.defaultPrevented) {
                    return;// already handled
                }
                if (e.key == 'Escape') {
                    e.preventDefault();
                    alert("Cancel");
                }
            },
            true
            );
        }
        if (document.readyState === 'complete' ||
                (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
            documentEditSetup();
        } else {
            document.addEventListener('DOMContentLoaded', documentEditSetup);
        }
    })();
</script>

I guess this would work as some sort of generic handler. You'd obviously need to add code for the 'Esc' key do emulate your 'Cancel' button.

-joho