以编程方式关注移动safari中的下一个输入字段。

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有一些限制，但我也看到了一些使用合成单击等方法的解决方案。

5 个解决方案

#1

I found a workaround that might work for you.

我找到了一个适合你的变通方案。

Apparently IOS/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)

在这里演示(在Demo中按下next按钮)

#2

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交换输入元素的位置、值和属性，这样看起来就像您正在移动到下一个字段，而实际上您仍然关注同一元素。下面是用于交换id、名称和值的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;
};

Demo here: http://jsfiddle.net/EbU6a/194/

演示:http://jsfiddle.net/EbU6a/194/

#3

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-

校验码,

https://jsbin.com/soqubal/3/edit?html,output

https://jsbin.com/soqubal/3/edit?html,输出

#4

UIWebview has the property keyboardDisplayRequiresUserAction

UIWebview有property keyboarddisplayrequicpr。

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 to false, 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

#5

<!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>