2

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

我不得不用document.getElementById('second').focus();焦点转到下一个输入框。不幸的是，这在 iO 中不起作用。

我做了进一步的研究，发现像“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();

        }
    }

谢谢

4

2 回答 2

0

在 iOS Safari 中。据我所知，在没有鼠标事件的情况下调用 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上查看

于 2013-05-19T16:04:08.807 回答
0 
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
     #hidebox {position:absolute; border: none; background:transparent;padding:1px;}
     #hidebox:focus{outline: 0;}

    </style>
</head>

<body>

<input type="text" maxlength="1" onkeyup="keyUp(this)" onkeydown="keyDown(this)" size="2" id="hidebox" at="1">
<input type="text" maxlength="1" size="2" id="mFirst" at="1" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mSecond" at="2" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mThird" at="3" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mFourth" at="4" onfocus="onFocus(this)">
</li>
<script type="text/javascript">

window.onload = function() {
     document.getElementById("mFirst").focus(); 
}
var array = ["mFirst","mSecond","mThird","mFourth"];
function keyUp(e) {
  var curId = array[Number(e.getAttribute("at"))-1];
  var nextId = array[Number(e.getAttribute("at"))];
  var curval= e.value;


var letters = /^[0-9a-zA-Z]+$/;
if(e.value.match(letters)){
  document.getElementById(curId).value = curval;
  if(e.getAttribute("at") <= 3){
  var nextPos = document.getElementById(nextId).offsetLeft;
  e.setAttribute("at",Number(e.getAttribute("at"))+1);
  e.style.left = nextPos+"px";
  }
 e.value = ""
}else {
 e.value = "";
}
} 
function keyDown(e) {
    var curId = array[Number(e.getAttribute("at"))-1];
    document.getElementById(curId).value = "";
} 

function onFocus(e) {
  document.getElementById("hidebox").focus();
  document.getElementById("hidebox").setAttribute("at",Number(e.getAttribute("at")));
  document.getElementById("hidebox").style.left = e.offsetLeft+"px";
  document.getElementById("hidebox").style.top = e.offsetTop+"px";
}

</script>
</body>
</html>
于 2014-05-22T08:20:41.783 回答