Question

我有5个输入，每个人都会等待一封信。一旦填充了一封信，我必须自动跳转到下一个输入。

问题是，如果我只捕获keyup，这会让我正确跳跃，但不能让我快速写下＃34;。

例如，我们必须写下“megan”这个词，所以我从m开始，但如果我在发布之前按下e（keyup） m密钥，然后我得到奇怪的行为。

这是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>

javascript（捕获keydown事件）

    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);
            //});

    });

在keydown中执行此操作让我快速写下来，但不能让我顺利跳转到下一个输入。

我想知道在检测到keydown时是否可以强制执行任何键盘。

Answer 1

可能你可以做这样的事情。但我不确定你的解释。

$('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
        }
    });
});

Answer 2

为什么你不能只在密钥上写下来并继续关键字？即，当捕获keydown事件时，按照您的操作收集值，然后在触发键启动事件时，将光标移动到下一个输入。

然而，在回答您关于解雇事件的问题时...基于this answer，您可以这样做：

// 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");
}

快速示例：

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'/>

在keydown之后强制键入

2 个答案: