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

Question

有很多主题可以解决这个问题，但似乎都是陈旧的且不相关的(ass further ios releases come out)。

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

我尝试过使用大量 jQuery hack 来实现这一点，但都没有成功另一个 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 上的输入框上，不会弹出键盘提示叹气(虽然它确实适用于桌面浏览器)，看来我将不得不用 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>

编辑2:

似乎根本没有办法在本地 html/js 网页中执行此操作(在编写此 ios 9.1 时)，如果有人有任何其他解决方案或想法要测试，我很乐意测试它们，但是至于现在，我不得不求助于手动单击按钮来集中输入并调出键盘提示。

Answer 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();。