在自动对焦ios网络浏览器上强制显示键盘答案

【问题标题】：Force show keyboard on autofocus ios web browser在自动对焦ios网络浏览器上强制显示键盘
【发布时间】：2017-06-16 21:23:20
【问题描述】：

有很多主题可以解决这个问题，但所有主题似乎都过时且不相关（还有更多的 ios 版本发布）。

我开发了一个通过网络浏览器运行的应用程序，无论是 safari 还是 firefox（在 iPad 上）。该网页对输入具有自动对焦功能，我需要强制打开键盘。

我已经尝试过使用大量 jQuery hack 来获得焦点、超时等但没有任何成功。我已经读到这可能使用 cordova 实现，但在我重新开发应用程序之前无论如何都可以使用另一个 JS 库，可以轻松“插入”到我现有的 html 页面。

我最接近的是这段代码，当我按下页面上的按钮时，它会将焦点放在我的表单输入上并显示键盘：

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
      var button = document.querySelector('#button');
      var input = document.querySelector('#input');
      var focus = function(e) {
        e.stopPropagation();
        e.preventDefault();
        var clone = input.cloneNode(true);
        var parent = input.parentElement;
        parent.appendChild(clone);
        parent.replaceChild(clone, input);
        input = clone;
        window.setTimeout(function() {
          input.value = input.value || "";
          input.focus();
        }, 0);
      }
      button.addEventListener('mousedown', focus);
      button.addEventListener('touchstart', focus);
    }, false);
  </script>

有什么方法可以模拟点击按钮，我尝试了以下方法，但这在任何浏览器上都不起作用，更不用说IOS了：

<script type="text/javascript">
$(document).ready(function() {
    $("#button").click();
});

</script>

简而言之，我可以模拟单击此按钮吗？如果我可以在我的桌面上运行它，我会交叉手指然后在 IOS 上运行。

或者如果其他人有任何建议/想法/技巧，我将非常感激。

我上面代码的工作示例取自here

编辑：

所以我可以在一段时间延迟后强制按下按钮（使用 MouseEvent），以模拟现实生活中的触地事件，但它只将焦点放在 ios 上的输入框上，它不会显示键盘提示sigh（不过它确实适用于桌面浏览器），看来我得用 cordova 重写了。

<script type="text/javascript">
    $(document).ready(function() {

        function focusinput(){
        var evt = new MouseEvent("touchstart", {
            view: window,
            bubbles: true,
            cancelable: true,
            clientX: 20,
            /* whatever properties you want to give it */
        }),
            ele = document.getElementById("button");
        ele.dispatchEvent(evt);
        } 


        function focusinputa(){
        var evt = new MouseEvent("mousedown", {
            view: window,
            bubbles: true,
            cancelable: true,
            clientX: 20,
            /* whatever properties you want to give it */
        }),
            ele = document.getElementById("button");
        ele.dispatchEvent(evt);
        }

        ;

        setTimeout(focusinput, 1000);
        setTimeout(focusinputa, 1500);


    });

</script>

EDIT2：

似乎根本没有办法做到这一点（在编写这个 ios 9.1 时），在原生 html/js 网页中，如果有人有任何其他解决方案或想法要测试，我很乐意测试它们，但是至于现在，我不得不求助于手动单击按钮来集中输入并调出键盘提示。

【问题讨论】：

你绑定的不是点击事件而是mousedown/touchstart。所以至少试试$("#button").mousedown(); 或$("#button").trigger('touchstart');。但话虽如此，我真的不确定它是否会起作用。
遗憾的是这不起作用，我应该补充说我确实尝试过。
下一步是尝试dispatch event，但我想还是不行
“此功能已从 Web 标准中删除”可能最好不要走这条路..
抱歉，链接错误，这里是developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent，但看起来 Safari 不支持它，真是意外...

标签： javascript jquery html ios

【解决方案1】：

我遇到了类似的问题，经过大量测试，我得到了一个简单的解决方案，我希望它可以帮助任何人;）

首先，Safari 显然做出了焦点，但没有打开键盘。所以我尝试将我的更改为。这对我有用。

<label for="search" id="mobile-search">Search</label>
<input type="text" name="search" id="search" value="">

<script type="text/javascript">
  $('#mobile-search').on('click', function() {
    // do your stuff, in my case some class changes
  });  
</script>

请确保您不要在点击事件上使用 .preventDefault();。

【讨论】：