我有几个输入字段，就像填字游戏一样：
每个方块都有自己的输入字段。原因之一是有时可以预先填充一个正方形。现在，在桌面浏览器上，只要输入一个字符，光标就会跳转到下一个输入字段。使用类似的东西效果很好：
$(this).next('input').focus();
但是移动 safari（我们在 ios 上测试）的问题是我不知道如何以编程方式自动“跳转”到下一个输入字段。用户可以通过“下一步”按钮执行此操作，但有没有办法自动执行此操作？
我知道focus() 触发器在 ios 上有一些限制，但我也看到了一些使用合成点击等的解决方法。
【问题讨论】：
标签： javascript jquery ios focus mobile-safari
我找到了一个可能对您有用的解决方法。
Apparently IOS/Safari 仅在触摸事件处理程序中“接受”焦点。我触发了一个触摸事件并在其中插入了.focus()。我用 Safari 在我的 iPhone3S 和 iPhone5S 上试过这个，它可以工作：
var focused = $('input:first'); //this is just to have a starting point
$('button').on('click', function () { // trigger touch on element to set focus
focused.next('input').trigger('touchstart'); // trigger touchstart
});
$('input').on('touchstart', function () {
$(this).focus(); // inside this function the focus works
focused = $(this); // to point to currently focused
});
演示here
（在演示中按下一步按钮）
【讨论】：
在不关闭键盘的情况下以编程方式移动到移动浏览器中的下一个输入字段似乎是不可能的。 （这是一个糟糕的设计，但这是我们必须使用的。）然而，一个聪明的技巧是用 Javascript 交换输入元素的位置、值和属性，这样看起来你正在移动到下一个字段，而实际上你仍然专注于同一个元素。下面是交换id、name 和值的jQuery 插件的代码。您可以根据需要对其进行调整以交换其他属性。还要确保修复所有已注册的事件处理程序。
$.fn.fakeFocusNextInput = function() {
var sel = this;
var nextel = sel.next();
var nextval = nextel.val();
var nextid = nextel.attr('id');
var nextname = nextel.attr('name');
nextel.val(sel.val());
nextel.attr('id', sel.attr('id'));
nextel.attr('name', sel.attr('name'));
sel.val(nextval);
sel.attr('id', nextid);
sel.attr('name', nextname);
// Need to remove nextel and not sel to retain focus on sel
nextel.remove();
sel.before(nextel);
// Could also return 'this' depending on how you you want the
// plug-in to work
return nextel;
};
【讨论】：
nextel.detach(); 而不是nextel.remove();，这些字段也可以重复使用。 （remove() 也移除了绑定的监听器）
.next()和.before()来适应任何位置的元素，以删除下一个表单元素并重新插入它需要去任何地方。
UIWebview 有属性keyboardDisplayRequiresUserAction
当此属性设置为
true时，用户必须明确点击 Web 视图中的元素以显示该元素的键盘（或其他相关输入视图）。当设置为false时，元素上的焦点事件会导致输入视图自动显示并与该元素关联。
https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio
【讨论】：
我希望这就是你要找的-
$(document).ready(function() {
$('input:first').focus(); //focus first input element
$('input').on('keyup', function(e) {
if(e.keyCode == 8) { //check if backspace is pressed
$(this).prev('input').focus();
return;
}
if($(this).val().length >= 1) { //for e.g. you are entering pin
if ($(this).hasClass("last")) {
alert("done");
return;
}
$(this).next('input').focus();
}
});
$('input').on('focus', function() {
if(!$(this).prev('input').val()){
$(this).prev('input').focus();
}
});
});
在这里检查代码-
【讨论】：
在 ios 部分的配置文件中添加这一行
preference name="KeyboardDisplayRequiresUserAction" value="false"
【讨论】：
我在 safari ios 上遇到了同样的问题。在登录页面上，我在用户输入一个短信代码后以编程方式关注下一个输入字段。 我触发了对输入更改事件的自动关注。我通过添加延迟解决了这个问题。
详情见下方代码
<InputItem
value={item}
type='number'
maxLength={1}
ref={el => this[`focusInstRef${index}`] = el}
onChange={(value) => {
value&&index !== 5 && setTimeout(() => {this[`focusInstRef${index + 1}`].focus()}, 5);
vAppStore.setSmsCodeArr(value, index);}
}
/>【讨论】：
<!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>
【讨论】：