以編程方式關注移動 Safari 中的下一個輸入字段

Question

我有幾個輸入字段，就像填字游戲的答案行一樣：

在此處輸入圖片說明

每個方塊都有自己的輸入字段。 其原因之一是有時可以預先填充正方形。 現在，在桌面瀏覽器上，只要輸入一個字符，光標就會跳轉到下一個輸入字段。 使用以下內容非常有效：

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

但是移動 safari 上的問題（我們在 ios 上測試）是我不知道如何以編程方式自動“跳轉”到下一個輸入字段。 用戶可以通過“下一步”按鈕執行此操作，但有沒有辦法自動執行此操作？

我知道focus()觸發器對 ios 有一些限制，但我也看到了一些使用合成點擊等的解決方法。

Answer 1

我找到了一個可能對你有用的解決方法。

顯然， 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
});

演示在這里
（在演示中按下一步按鈕）

Answer 2

在不關閉鍵盤的情況下以編程方式移動到移動瀏覽器中的下一個輸入字段似乎是不可能的。 （這是一個糟糕的設計，但這是我們必須使用的。）然而，一個聰明的技巧是用 Javascript 交換輸入元素的位置、值和屬性，這樣看起來你實際上是在移動到下一個字段你仍然專注於同一個元素。 下面是用於交換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/

Answer 3

UIWebview 有屬性keyboardDisplayRequiresUserAction

當此屬性設置為true ，用戶必須顯式點擊 Web 視圖中的元素以顯示該元素的鍵盤（或其他相關輸入視圖）。 當設置為false ，元素上的焦點事件會導致顯示輸入視圖並自動與該元素關聯。

https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio

Answer 4

我希望這就是你要找的——

$(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

Answer 5

在 ios 部分的配置文件中添加這一行

首選項名稱="KeyboardDisplayRequiresUserAction" value="false"

Answer 6

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

Answer 7

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

以編程方式關注移動 Safari 中的下一個輸入字段

問題描述

7 個解決方案

解決方案1
29 2013-09-10 21:34:04

解決方案2
10 2014-06-12 12:57:28

解決方案3
1 2017-12-12 23:15:12

解決方案4
0 2017-01-02 12:22:57

解決方案5
0 2018-10-26 09:59:16

解決方案6
0 2021-04-28 05:47:29

解決方案7
-7 2014-05-22 08:34:35

以編程方式關注移動 Safari 中的下一個輸入字段

問題描述

7 個解決方案

解決方案1 29 2013-09-10 21:34:04

解決方案2 10 2014-06-12 12:57:28

解決方案3 1 2017-12-12 23:15:12

解決方案4 0 2017-01-02 12:22:57

解決方案5 0 2018-10-26 09:59:16

解決方案6 0 2021-04-28 05:47:29

解決方案7 -7 2014-05-22 08:34:35

解決方案1
29 2013-09-10 21:34:04

解決方案2
10 2014-06-12 12:57:28

解決方案3
1 2017-12-12 23:15:12

解決方案4
0 2017-01-02 12:22:57

解決方案5
0 2018-10-26 09:59:16

解決方案6
0 2021-04-28 05:47:29

解決方案7
-7 2014-05-22 08:34:35