在自动对焦ios Web浏览器上强制显示键盘

Question

有很多主题可以解决这个问题，但是所有这些主题似乎都很旧而且不相关（进一步发布了ios版本）。

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

我已经尝试过没有任何成功，使用大量的jQuery黑客进行聚焦，超时等等。我已经读过这可能与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上工作。

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

上面代码的工作示例来自这里

编辑：

所以我可以在延迟一段时间之后强制按下按钮（使用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>

EDIT2：

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

Answer 1

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

首先，Safari显然是关注焦点，但不要打开键盘。 所以我尝试将<button>更改为<label> 。 这对我有用。

<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（）; 在点击事件上。