单击按钮后如何激活专注于输入的iOS键盘

Question

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

用户单击镜头图标并在显示键盘的输入中聚焦

在安卓上，这工作正常，只需放置：

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

这是一个笨拙的解决方法。

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

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

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

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

您还必须添加一种方法来删除 search-mode css 类，以使输入字段恢复到其初始隐藏状态。