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

IT技术 javascript jquery ios focus mobile-safari
2021-01-30 19:00:17

我有几个输入字段,就像填字游戏的答案行一样:

在此处输入图片说明

每个方块都有自己的输入字段。其原因之一是有时可以预先填充正方形。现在,在桌面浏览器上,只要输入一个字符,光标就会跳转到下一个输入字段。使用以下内容非常有效:

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

但是移动 safari 上的问题(我们在 ios 上测试)是我不知道如何以编程方式自动“跳转”到下一个输入字段。用户可以通过“下一步”按钮执行此操作,但有没有办法自动执行此操作?

我知道focus()触发器对 ios 有一些限制,但我也看到了一些使用合​​成点击等的解决方法。

6个回答

我找到了一种可能对您有用的解决方法。

显然, IOS/Safari 仅在触摸事件处理程序中“接受”焦点。我触发了一个触摸事件并将其插入.focus()其中。我在我的 iPhone3S 和 iPhone5S 上用 Safari 尝试了这个,它的工作原理:

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

演示在这里
(在演示中按下一步按钮)

非常聪明——不幸的是对我的情况不起作用——我想在键盘输入(例如,n 或 N 或 ENTER)上导航。参见jsfiddle.net/EbU6a/202
2021-03-18 19:00:17
@darkyndy“开始”点击事件是否真实是否重要,或者如果它被触发是否可以?
2021-03-20 19:00:17
我不敢相信这有 20 个赞成票,为什么还要创建 touchevents 之类的东西?只需将焦点放在 onClick 中,它就会起作用,问题是没有人在他们的代码中包含 click 事件
2021-03-22 19:00:17
@Wytze - 从我所见,这很重要,必须是真实事件(用户交互)
2021-03-29 19:00:17
这是有效的,因为您的开始事件是单击(鼠标事件)。如果您尝试使用其他事件作为开始事件(鼠标事件除外),它将不起作用。此链接可能会有所帮助:quora.com/...
2021-04-02 19:00:17

在不关闭键盘的情况下以编程方式移动到移动浏览器中的下一个输入字段似乎是不可能的。(这是一个糟糕的设计,但这是我们必须处理的。)然而,一个聪明的技巧是用 Javascript 交换输入元素的位置、值和属性,这样看起来你实际上是在移动到下一个字段你仍然专注于同一个元素。这里是一个jQuery插件,掉期交易代码idname和值。您可以根据需要调整它以交换其他属性。还要确保修复所有已注册的事件处理程序。

$.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/

如果输入之间有元素,这将不起作用。参见jsfiddle.net/EbU6a/743
2021-03-24 19:00:17
聪明的。如果您使用nextel.detach();而不是nextel.remove();,这些字段也将是可重用的。remove()也删除绑定的侦听器)
2021-03-26 19:00:17
@RubenSandwich 是的,这个示例代码做出了许多假设,但它可以通过更新.next().before()删除下一个表单元素并在需要去的任何地方重新插入它来适应任何位置的元素。
2021-04-07 19:00:17

UIWebview 有属性 keyboardDisplayRequiresUserAction

当此属性设置为 时true,用户必须明确点击 Web 视图中的元素以显示该元素的键盘(或其他相关输入视图)。当设置为 时false,元素上的焦点事件会导致输入视图自动显示并与该元素关联。

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

这正是我一直在寻找 Cordova 应用程序的原因!非常感谢
2021-04-14 19:00:17

我希望这就是你正在寻找的——

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

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

首选项名称="KeyboardDisplayRequiresUserAction" value="false"

你怎么知道 TO 正在开发一个混合应用程序?他用“javascript”、“jquery”、“iOS”和“mobile-safari”标记了他的问题。这根本没有回答这个问题。至少没有关系。
2021-04-02 19:00:17