ios 在移动的Safari中以编程方式关注下一个输入字段

pgccezyw 于 2022-12-24 发布在 iOS

关注(0)|答案(7)|浏览(124)

我有几个输入字段在行，行为像一个纵横字谜答案行：

每个方块都有自己的输入字段。这样做的原因是有时候方块可以预先填充。现在，在桌面浏览器上，每当输入一个字符时，光标就会跳到下一个输入字段。使用以下代码可以很好地工作：

$(this).next('input').focus();

但移动的safari（我们在ios上测试）的问题是，我不知道如何通过编程自动“跳转”到下一个输入字段，用户可以通过“下一个”按钮来完成，但有没有办法自动完成呢？
我知道focus()触发器在ios上有一些限制，但是我也看到过一些使用合成点击等的变通方法。

ios

来源：https://stackoverflow.com/questions/18728166/programmatically-focus-on-next-input-field-in-mobile-safari

7条答案

按热度按时间

i7uq4tfw1#

我找到了一个可能对你有用的变通办法。
Apparently IOS/Safari只在触摸事件处理程序中“接受”焦点。我触发了一个触摸事件，并将.focus()插入其中。我在装有Safari的iPhone 3S和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

（在演示中按下“下一步”按钮）

赞(0）回复(0）举报 2022-12-24

rekjcdws2#

在移动的浏览器中，通过编程移动到下一个输入字段而不关闭键盘似乎是不可能的。（这是一个糟糕的设计，但我们必须使用它。）然而，一个聪明的方法是交换输入元素的位置、值和属性，这样看起来就像您正在移动到下一个字段，而实际上您仍然关注同一个元素。下面是交换id、name和value的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;
};

此处演示：http://jsfiddle.net/EbU6a/194/

赞(0）回复(0）举报 2022-12-24

xjreopfe3#

UIWebview具有属性keyboardDisplayRequiresUserAction
当此属性设置为true时，用户必须显式点击Web视图中的元素才能显示该元素的键盘（或其他相关输入视图）。当设置为false时，元素上的焦点事件会导致显示输入视图并自动与该元素关联。
https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio

赞(0）回复(0）举报 2022-12-24

hgb9j2n64#

希望这就是你要找的-

$(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();
    }
  });
});

检查代码-
https://jsbin.com/soqubal/3/edit?html,output

赞(0）回复(0）举报 2022-12-24

8e2ybdfx5#

将此行添加到配置文件的ios部分

首选项名称=“键盘显示要求用户操作”值=“假”

赞(0）回复(0）举报 2022-12-24

bwleehnv6#

我在safari ios上遇到了同样的问题。在登录页面上，我在用户输入一个sms代码后以编程方式关注下一个输入字段。我触发了自动关注输入更改事件。我通过添加延迟修复了这个问题。
有关详细信息，请参见下面的代码

<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);}
    }
/>

赞(0）回复(0）举报 2022-12-24

ftf50wuq7#

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

赞(0）回复(0）举报 2022-12-24

我来回答

ios 在移动的Safari中以编程方式关注下一个输入字段

7条答案

相关问题

热门标签

最新问答