以编程方式专注于移动Safari上的下一个input字段
行中有几个input字段，就像填字游戏答案行一样：
每个广场都有自己的input栏。 其中的原因是有时候一个正方形可以预先填充。 现在，在桌面浏览器中，只要input了字符，光标就跳转到下一个input字段。 这真的很好使用像这样的东西：
$(this).next('input').focus(); 但移动Safari（我们在iOS上testing）的问题是，我不知道如何以编程方式自动“跳转”到下一个input字段。 用户可以通过“下一步”button来做到这一点，但有没有办法自动做到这一点？
我知道focus()触发器对ios有一些限制，但是我也看到了一些使用合成点击的解决方法。
我find了一个解决方法，可能适合你。
显然 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 });
在这里演示
（按演示中的下一个button）
以编程方式移动到移动浏览器中的下一个input字段而不closures键盘似乎是不可能的。 （这是可怕的devise，但是这是我们必须要处理的）。但是，巧妙的做法是使用Javascript交换input元素的位置，值和属性，以便在事实上看起来像移动到下一个字段你仍然关注于相同的元素。 这里是一个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; };
在这里演示： http : //jsfiddle.net/EbU6a/194/
我希望这是你正在寻找的 –
$(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 eg 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(); } }); });
检查代码在这里 –
<!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>
