您如何控制在填写表单时单击下一步时 iOS/Android 将关注哪个字段

How do you control which field iOS/Android will focus to when you click next while you're filling out a form?

本文关键字：Android iOS 下一步 字段 单击 控制 何控制 表单      更新时间：2023-09-26

这种情况是我有一个具有多步骤过程的模态，我一次显示一个，但并非每个步骤都有一个表单字段。

因此，当我准备好从Step 1（具有表单字段）继续前进并单击键盘工具栏中的下一个辅助图标（iOS 的功能）时，它会将我转发到Step 4中不可用/半透明字段。

第 1 步：询问年龄
第 2 步：选择性别（这些是 LI 元素）
第 3 步：选择兴趣（这些也是 LI 元素）
步骤 4：输入名称

我已经尝试过tabIndex，但这没有任何影响。

我不确定这是否可能，因为这确实是一个iOS控件。如果不可能，你能隐瞒吗？

不希望的解决方法是，当用户专注于Step 4字段时进行检查，并且尚未选择Step 3和Step 4中的元素，则用户将重点放在适用的上一步上。

据我所知，这是 html 结构的相同顺序。因此，如果要更改顺序，请更改html。如果您不能或由于某种原因（例如导致问题的复杂 html 结构或其他原因）无法通过更改 html 文件来避免问题。下面的代码是如何禁用IOS键盘<prev> <next>按钮。

.html

<input type="text" />
<input type="number" />
<input type="date" />
<input type="time" />
<input type="tel" />

JavaScript（jquery）

$("input").on("touchstart",function(e){
  _$activeElem = $(this);
  //readonly disables next/prev buttons. so when user tap input field,turns any other input into readonly
  //You cannot use focus here because keyboard shows up before focus fired,you need to use touchstart instead.
  $("input").each(function(){
    if($(this).get(0) === _$activeElem.get(0)){
      _$activeElem.removeAttr("readonly");
      $(this).one("blur",function(){
        $(this).attr("readonly","readonly");
      });
      return;
    }else{
      $(this).attr("readonly","readonly");
    }
  });
  //remove readonly property on blur
  $("input").on("blur",function(){
    if($("input:not([readonly])").length === -1){
      $("input").removeAttr("readonly");
    }
  });
});

并通过CSS使readonly输入看起来像普通输入字段。

相关文章：