jQuery 以编程方式关注移动 Safari 中的下一个输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18728166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Programmatically focus on next input field in mobile safari
提问by David Hellsing
I have several input fields in line that acts like a crossword answer line:
我有几个输入字段，就像填字游戏的答案行一样：
Each square has it's own input field. The reason for this is amongst other things that sometimes a square can be pre-populated. Now, on desktop browser the cursor jumps to the next input field whenever a char is entered. That works really well using something like:
每个方块都有自己的输入字段。其原因之一是有时可以预先填充正方形。现在，在桌面浏览器上，只要输入一个字符，光标就会跳转到下一个输入字段。使用以下内容非常有效：
$(this).next('input').focus();
But the problem on mobile safari (we test on ios) is that I don't know how to automatically "jump" to the next input field programatically. The user can do it via the the "next" button, but is there a way to do this automatically?
但是移动 safari 上的问题（我们在 ios 上测试）是我不知道如何以编程方式自动“跳转”到下一个输入字段。用户可以通过“下一步”按钮执行此操作，但有没有办法自动执行此操作？
I know that the focus()trigger has some limitations on ios, but I've also seen some workaround using synthesized clicks etc.
我知道focus()触发器对 ios 有一些限制，但我也看到了一些使用合成点击等的解决方法。
回答by Sergio
I found a workaround that might work for you.
我找到了一个可能对你有用的解决方法。
ApparentlyIOS/Safari only "accepts" the focus when inside a touch event handler. I triggered a touch event and inserted the .focus()inside it. I tried this on my iPhone3S and iPhone5S with Safari and it works:
显然，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
});
Demo here
(press next button in demo)
演示在这里
（在演示中按下一步按钮）
回答by Kevin Borders
Programmatically moving to the next input field in a mobile browser without dismissing the keyboard appears to be impossible. (This is terrible design, but it's what we have to work with.) However, a clever hack is to swap the input element positions, values, and attributes with Javascript so that it looks like you are moving to the next field when in fact you are still focused on the same element. Here is code for a jQuery plug-in that swaps the id, name, and value. You can adapt it to swap other attributes as necessary. Also be sure to fix up any registered event handlers.
在不关闭键盘的情况下以编程方式移动到移动浏览器中的下一个输入字段似乎是不可能的。（这是一个糟糕的设计，但这是我们必须使用的。）然而，一个聪明的技巧是用 Javascript 交换输入元素的位置、值和属性，这样看起来你实际上是在移动到下一个字段你仍然专注于同一个元素。这里是一个jQuery插件，掉期交易代码id，name和值。您可以根据需要调整它以交换其他属性。还要确保修复所有已注册的事件处理程序。
$.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;
};
Demo here: http://jsfiddle.net/EbU6a/194/
演示在这里：http: //jsfiddle.net/EbU6a/194/
回答by Lakshay Sharma
Add this line in your config file in ios section
在 ios 部分的配置文件中添加这一行
preference name="KeyboardDisplayRequiresUserAction" value="false"
首选项名称="KeyboardDisplayRequiresUserAction" value="false"
回答by Kapilrc
I hope this is what you are looking for-
我希望这就是你要找的——
$(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();
}
});
});
check code here-
在这里检查代码-
回答by pkamb
UIWebview has the property keyboardDisplayRequiresUserAction
UIWebview 有属性 keyboardDisplayRequiresUserAction
When this property is set to
true, the user must explicitly tap the elements in the web view to display the keyboard (or other relevant input view) for that element. When set tofalse, a focus event on an element causes the input view to be displayed and associated with that element automatically.
当此属性设置为 时
true，用户必须显式点击 Web 视图中的元素以显示该元素的键盘（或其他相关输入视图）。当设置为 时false，元素上的焦点事件会导致显示输入视图并自动与该元素关联。
https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio
https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio
回答by Srikanth Ambati
<!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>
