IOS在输入焦点上显示键盘答案

【问题标题】：IOS show keyboard on input focusIOS在输入焦点上显示键盘
【发布时间】：2019-06-22 19:08:46
【问题描述】：

我有一个无法解决的问题。

键盘在 IOS 上的 input.focus() 上不显示

 searchMobileToggle.addEventListener('click', function() {
       setTimeout(function(){
          searchField.focus();
       }, 300);
    });

我一直在寻找没有结果的解决方案，我知道这是一个经常无法解决的问题，但我看到 NIKE (https://m.nike.com/fr/fr_fr/) 和 FOODSPRING (@ 987654322@) 在移动设备上进行。

所以我想知道他们是怎么做的？

【问题讨论】：

would this help?
焦点是当你点击元素时。你想要 onclick 函数吗？

标签： javascript html ios vue.js safari

【解决方案1】：

没有合法的方法可以做到这一点，因为 iOS 有点想只在用户交互时打开键盘，但是您仍然可以使用 prompt() 或使用 focus() 来实现这一点在click() 事件中，它会显示出来。

【讨论】：

"从 click() 事件中" 所以，你基本上是在告诉删除超时，对吧？因为作者已经在点击事件中
不，你可以保留它。基本上在聚焦后触发输入字段的点击事件。

【解决方案2】：

我找到了解决方案，click() 没用，但我想通了。

searchMobileToggle.addEventListener('click', function() {
         if(mobileSearchblock.classList.contains('active')) {
            searchField.setAttribute('autofocus', 'autofocus');
            searchField.focus();
        }
        else {
            searchField.removeAttribute('autofocus');
        }
    });

我正在使用 vue.js，它在加载组件时删除了输入 autofocus 属性。所以我点击它，但还有另一个问题，自动对焦只工作一次，但结合focus（），它现在一直工作:)

感谢您的帮助！

【讨论】：

对我不起作用...我什至将它与设置焦点后触发点击事件结合起来，仍然不起作用：/在 Iphone11 iOS、v13 Safari 上测试

【解决方案3】：

其他答案都不适合我。我最终研究了 Nike javascript 代码，这就是我想出的可重用函数：

function focusAndOpenKeyboard(el, timeout) {
  if(!timeout) {
    timeout = 100;
  }
  if(el) {
    // Align temp input element approximately where the input element is
    // so the cursor doesn't jump around
    var __tempEl__ = document.createElement('input');
    __tempEl__.style.position = 'absolute';
    __tempEl__.style.top = (el.offsetTop + 7) + 'px';
    __tempEl__.style.left = el.offsetLeft + 'px';
    __tempEl__.style.height = 0;
    __tempEl__.style.opacity = 0;
    // Put this temp element as a child of the page <body> and focus on it
    document.body.appendChild(__tempEl__);
    __tempEl__.focus();

    // The keyboard is open. Now do a delayed focus on the target element
    setTimeout(function() {
      el.focus();
      el.click();
      // Remove the temp element
      document.body.removeChild(__tempEl__);
    }, timeout);
  }
}

// Usage example
var myElement = document.getElementById('my-element');
var modalFadeInDuration = 300;
focusAndOpenKeyboard(myElement, modalFadeInDuration); // or without the second argument

请注意，这绝对是一个 hacky 解决方案，但 Apple 这么长时间都没有解决此问题的事实证明了它的合理性。

【讨论】：

@sandrina-p 它在 ios v13 的这个代码沙箱上为我工作：codesandbox.io/s/z33rnoy1nm
@n8jadams 我们可以在不点击显示模式按钮的情况下执行此操作吗？
@Deepak 当然。该代码沙箱仅使用调用该函数的 onclick 回调。每当您希望这一切都发生时，（无论是否点击，）调用focusAndOpenKeyboard 函数。
在带有 React 和 MUI 的 iOS 13.3 上成功使用了这个 hack。谢谢，@n8jadams！
@n8jadams，如果由于某种原因您不能附加到同一个元素，您可以附加到正文并使用从视口测量的getBoundingClientRect().top。该位置可能对您来说是准确的，但是如果您要将 CSS position: relative 添加到 el 和 body 之间的任何祖先，则测量可能会有所偏差。这对你来说可能无关紧要，但对我来说很重要，所以我想对与我相似的其他人提出警告。 developer.mozilla.org/en-US/docs/Web/API/Element/…