Question

有很多主题可以解决这个问题，但所有这些主题似乎都很旧而且不相关（另外还有ios发布了。）

我开发了一个通过网络浏览器运行的applciation，无论是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上工作。

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

上述代码的工作示例取自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>

EDIT2：

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

Answer 1

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

首先，Safari显然是关注焦点，但不要打开键盘。所以我试着改变我的＆lt; ＆lt;按钮＆gt; 标签＆gt; 即可。这对我有用。

<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（）; 。

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

1 个答案: