Question

场景是我有一个模式，其中包含一个多步骤流程，我一次只显示一个，但并非每个步骤都有一个表单域。

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

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

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

我不确定这是否可行，因为这实际上是iOS控件。如果不可能你可以隐藏它吗？

如果用户专注于Step 4字段，并且未选择Step 3和Step 4中的元素，请将用户放在适用的上一步。

Answer 1

据我所知，它的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");
    }
  });
});

并使readonly输入看起来像CSS的正常输入字段。

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

1 个答案: