在 iOS 中执行 onkeyup 事件时，Javascript focus() 不起作用

Question

我有 4 个输入框来输入 4 位密码。当用户填写第一个输入框时，我想聚焦到下一个输入框。

我必须使用 document.getElementById('second').focus(); 来聚焦到下一个输入框。不幸的是，这在 iOs 中不起作用。

我做了进一步的研究，发现聚焦不会发生在像“onkeyup”、“onkeypress”这样的事件上，但它适用于“onclick”事件。

你们有解决此问题的想法或解决此问题的替代解决方案吗？

HTML

<input id="first" name="first" type="number" style="width: 50px; height: 50px;" maxlength="1" onkeyup="focusSecondBox(event);" />

<input id="second" name="second" type="number" style="width: 50px; height: 50px;" maxlength="1" onkeyup="focusThirdBox(event);"/>

JS

function getEventCharCode(evt){
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        return charCode;
    }

    function isEmptyElement(element){

        return (element === null || element.value === null || element.value === '');
    }

    function focusSecondBox(evt){



        var element = document.getElementById('first');
        var previousElement = document.getElementById('first');
        var nextElement = document.getElementById('second');
        focusInput();

    }

    function focusInput(){
        var charCode = getEventCharCode(evt);
        if (isEmptyElement(element)) {

            if (charCode === 8) {
                previousElement.focus();
                previousElement.value = previousElement.value;

            } 
        } else if (nextElement !== null) {

            nextElement.focus();

        }
    }

谢谢

Answer 1

在 iOS 浏览器中。据我所知，在没有鼠标事件的情况下调用 focus() 很难或不可能显示键盘。

替代方案

但是，在这种情况下，我通过以下方式实现了期望:

• 使用隐形输入框。
• 聚焦任何输入密码字段时聚焦不可见的输入字段。
• 使用按键事件移动不可见的输入字段位置。
• 通过不可见的输入字段更改密码字段。

HTML

<div id="dummyDiv" style="width:0px;height:0px;overflow:hidden;">
<input id="dummy" type="number" />
</div>
<input id="p0" type="number" style="width: 50px; height: 50px;" maxlength="1" />
<input id="p1" type="number" style="width: 50px; height: 50px;" maxlength="1" />
<input id="p2" type="number" style="width: 50px; height: 50px;" maxlength="1" />
<input id="p3" type="number" style="width: 50px; height: 50px;" maxlength="1" />

JavaScript

window.addEventListener('load', function() {
    var words = [];
    for(var i=0; i < 4; i++) {
        words[i]  = document.getElementById('p'+i);
    }
    var dummy = document.getElementById('dummy');
    var dummyDiv = document.getElementById('dummyDiv');
    words.forEach(function(word) {
        word.addEventListener('click', function(e) {
            dummy.focus();
        });
    });
        dummy.addEventListener('keypress', function(e) {
            if (dummy.value.length >= 4 || !String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {
                e.preventDefault();
            }
        });

    dummy.addEventListener('keyup', function(e) {
        console.log(dummy.value);
        var len = dummy.value.length;

        for(var i=0; i<4; i++) {
            if(len <= i) {
                words[i].value = '';
            } else {
                words[i].value = dummy.value[i];
            }
        }
        if (len>=4) {
            return;
        }
        dummyDiv.style.position = 'absolute';
        var rect = words[len].getBoundingClientRect();
        dummyDiv.style.left = rect.left+'px';
        dummyDiv.style.top = (rect.top+15)+'px';
    });
});

工作样本

http://nakaji-dayo.github.com/ios-safari-passcode-boxes/

请在 iOS 上查看