Force keyup after keydown

Question

I have 5 inputs, everyone of them will wait for a letter. Once one is filled with a letter I have to automatically jump to the next input.

Problem is that, if I capture only keyup this makes me jump correctly, but doesn't let me to write "quickly".

e.g Let's say I have to write the word 'megan', so I start with m but if I press e before I release (keyup) the m key, then I get weird behaviour.

This is the HTML

    <form>
        <div class="code-cell"><input id="code-1" tabindex="1" class="code-input" type="text"  data-isvalid="false" /></div>
        <div class="code-cell"><input id="code-2" tabindex="2" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div>
        <div class="code-cell"><input id="code-3" tabindex="3" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div>
        <div class="code-cell"><input id="code-4" tabindex="4" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div>
        <div class="code-cell"><input id="code-5" tabindex="5" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div>
    </form>

The javascript (capturing the keydown event)

    var goTo = function (curIndex, nextIndex, e) {

        // Backwards
        if ((curIndex > codeMinLength) && (nextIndex < curIndex)) {
            if (nextIndex < 5 && $('#code-' + curIndex).val() === '') {
                $('#code-' + nextIndex).focus();
            }
            $('#code-' + curIndex).val('');
        }

        // Foreward
        if ((curIndex < codeMaxLength) && (nextIndex > curIndex)) {
            if ($('#code-' + curIndex).val().trim().length > 0) {
                // Force the keyup of the previous pressed key not yet released
                $('#code-' + nextIndex).focus();
            }
        }

    };

    var eventToCapture = (window._PFN.isMobile) ? 'keyup' : 'keydown';
    $('.code-input').on(eventToCapture, function (e) {

        var $input = $(e.target);
        var keyCode = e.keyCode || e.which;

            curIndex = parseInt($input.attr('tabindex'));
            nextIndex = null;

            if(e.keyCode === 13) {
                return validateCode();
            }

            if (keyCode === 8) { // Backspace
                nextIndex = curIndex - 1;
            } else {
                nextIndex = curIndex + 1;
            }

            //$('.code-input').on('keyup', function(e){
            goTo(curIndex, nextIndex, e);
            //});

    });

Doing this in keydown let me write quickly, but doesn't let me jump smoothly to the next input.

I was wondering if I could force any keyup when a keydown is detected.

Please place your keyup and keydown event code also. – Haresh Vidja Jul 20 '16 at 13:00 — Haresh Vidja, Jul 20 '16 at 13:00

score 0 · Answer 1 · answered Jul 20 '16 at 13:02

May be you can do something like this. But I am not sure about your explanation.

$('body').keydown(function (e) {
    if(e.keyCode==40) { // use your key code instead of Enter Key code
        //do something
    }
    return false;
})
.keyup(function(e) {
    if(e.keyCode==40) { // use your key code instead of Enter Key code
        //do something else
    }
    return false;
});


$('body').on('keyup', function (e) {
    if(e.keyCode==40) { // use your key code instead of Enter Key code
        //do something
    }
    // after first keyup set to handle next keydown only once:
    $(this).one('keydown', function(e) { 
        if(e.keyCode==40) { // use your key code instead of Enter Key code
            //do something else
        }
    });
});

score 0 · Answer 2 · edited May 23 '17 at 12:14

Why can you not just write on the key down and move on the keyup? i.e. when the keydown event is captured collect the value as you are doing, then as the key up event is fired, move the cursor to the next input.

However in response to your question on firing events...Based on this answer, you could do this:

// Do whatever here to captrure your keydown then
if ("createEvent" in document) {
    var el = document.getElementById('textBox');
    var e = document.createEvent('HTMLEvents');
    e.initEvent('keyup', false, true);
    el.dispatchEvent(e);
}
else{
    element.fireEvent("onkeyup");
}

quick example:

var el = document.getElementById('textBox');
el.onkeyup=function(){
    console.log('KeyUp Caught');
};
el.onkeydown=function(){
    console.log('KeyDown Caught');
    if ("createEvent" in document) {
        var e = document.createEvent('HTMLEvents');
        e.initEvent('keyup', false, true);
        el.dispatchEvent(e);
    } else {
        element.fireEvent("onkeyup");
    }
};

<input id="textBox" type='text'/>

if I just move on the keyup, then I can't write quickly as I say in the question — R01010010, Jul 20 '16 at 13:51

Force keyup after keydown

2 Answers2