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

Posted 2023-03-14

【中文标题】单击按钮后如何激活专注于输入的iOS键盘？

【英文标题】：How activate iOS keyboard focusing on an input after clicking in a button?

【发布时间】：2017-10-16 18:14:59

【问题描述】：

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

用户点击镜头图标并专注于显示键盘的输入

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

jQuery('input').focus();

但在ios上，这不起作用，输入显示但不聚焦，键盘不出现，有什么想法吗？

【参考方案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/

【参考方案2】：

您可能希望使用touchstart 让它在iOS 上运行（这也应该在Android 上运行）。在点击处理程序中，在输入上触发 touchstart。我假设 myinput 是您输入的类。

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

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

    $(this).focus();

)

【讨论】：

我尝试了与此类似的方法。我会试试你的 sn-p 并回来提供反馈。

好吧，根本不工作，有时触发键盘，有时不。我会继续努力

【参考方案3】：

这是一个 hacky 解决方法。

将您的输入置于镜头图标按钮上方。将输入容器设置为与按钮类似的宽度，并将不透明度设置为 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 类，以使输入字段恢复到其初始隐藏状态。