Question

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

键盘未显示在IOS上的 input.focus（） 上

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

我一直在寻找没有结果的溶液中，我知道这是一个未解决的频繁的问题，但我看到的 NIKE （https://m.nike.com/fr/fr_fr/）和 FOODSPRING （https://www.foodspring.fr/）在移动设备上进行操作。

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

Answer 1

这两个答案都不适合我。我最终查看了耐克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

请注意，这绝对是一个棘手的解决方案，但是Apple这么长时间没有修复这个事实证明了这一点。

Answer 2

没有合法的方法，因为iOS希望只在用户交互时打开键盘，但是您仍然可以使用prompt()或{ {1}}事件中的{1}}，它将显示出来。

Answer 3

我找到了一种解决方案，click()没有用，但是我发现了。

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

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

感谢您的帮助！

iOS在输入焦点上显示键盘

3 个答案: