Question

我正在开发一个搜索模块，并且坚持这个功能，逻辑是：

用户点击镜头图标并将焦点放在显示键盘的输入

在android上运行正常，只需输入：

jQuery('input').focus();

但是在iOS上，这不起作用，输入显示但不关注，键盘没有出现，有什么想法吗？

Answer 1

搜索并测试了一些工作选项后，我发现了这一点：

$(function() {
  function focus() {
    $('#input').focus();
  }

  $(document.body).load($(focus));
  $('#button').click(focus); // click on the #button element will focus #input and show iOS keyboard
});

http://jsfiddle.net/hgxj5yue/

Answer 2

您可能希望使用touchstart在iOS上运行（这也适用于Android）。在单击处理程序中，在输入上触发touchstart。我假设myinput为您输入的类。

$('input.myinput').trigger('touchstart');

$('input.myinput').on('touchstart', function() {

    $(this).focus();

})

Answer 3

这是一个hacky work-around。

将输入放在镜头图标按钮上方。将输入容器设置为与按钮类似的宽度，并将不透明度设置为0，使其不可见。像这样：

def get_children (parent :int, adjacencies :list) -> set:
    return {child for (parent, child) in adjacencies}

然后，当用户点击按钮时，他们实际上是在输入内部单击，这将本地设置焦点。添加输入单击事件处理程序以将不透明度设置为1，将输入宽度设置为适当的大小。

div.input-container {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;    
    z-index: 1000;    
    opacity: 0;
}

您还必须添加一种方法来删除inputField.addEventListener('click', (event) => { //use Jquery or plain JS to add a search-mode class to unhide the input }); div.input-container.search-mode { width: 100%; opacity: 0; } css类，以使输入字段恢复到其初始隐藏状态。

单击按钮后如何激活iOS键盘聚焦输入？

3 个答案: