IOS在输入焦点上显示键盘

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

其他答案都不适合我。 我最终查看了 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 这么长时间都没有解决这个问题的事实证明了它的合理性。

Answer 2

我找到了一个解决方案， click()不起作用，但我想通了。

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

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

谢谢你的帮助！

Answer 3

自动对焦现在可以与iOS更新13.1.2一起使用！！！！ 这真是太好了，因为这个问题已经存在多年了。

Answer 4

这真的让我/我们发疯。 它在 Android 手机上运行良好，但 Apple 开发人员禁用了某些功能。 （我知道在不必要的时候弹出键盘很烦人）。

我偶然发现 Semantic-UI 的“弹出”模块神奇地解决了这个问题。

请注意，该解决方案适用于 SemanticUI（@semantic-ui 团队可能会告诉什么事件使这项工作有效）

以下是我的做法：

const [search, setSearch] = useState(false);
const inputRef = useRef(null);

React.useEffect(() => {
  if (search) {
     inputRef.current.focus();
   } else {
     inputRef.current.blur();
   }
}, [search]);

<div onClick={() => setSearch(true)}> 
   <Popup
     content="Search for Swimmers and Time Standards."
     offset={[-500, -1000]}
     trigger={<Icon name="search" />}
      />
</div>

{search && <Input ref={inputRef} />}

如你所见，我用 Popup 模块包裹了触发 Icon，并通过设置疯狂偏移来隐藏 Popup 内容。 然后它神奇地起作用。

在此处查看演示： https ://swimstandards.com/（在您的 iPhone 上查看）

Answer 5

角度解决方案：

单击按钮时，我们需要创建临时输入，附加到现有容器（靠近我们的输入）并专注于它。

  btnClicked() {
      this.showModal = true; 
      
      this.searchBar = this.renderer2.selectRootElement('#searchBar', true);
     // 2nd argument preserves existing content

      // setting helper field and focusing on it
      this.inputHelper = this.renderer2.createElement('input');
      this.renderer2.appendChild(this.searchBar, this.inputHelper);
      this.inputHelper.focus();

      let event = new KeyboardEvent('touchstart',{'bubbles':true});            
      this.searchBarButton.nativeElement.dispatchEvent(event);
  }

在显示模态/目标输入后，我们移动焦点并删除临时的：

  initiateKeyboard() {       
    setTimeout(()=> {      
      this.searchBarInput.nativeElement.focus();     
      this.renderer2.removeChild(this.searchBar, this.inputHelper);
    },180);
  }

和模板：

<div id="searchBar"> 
  <input type="button" class="button is-link is-light" value="Search" (click)="btnClicked()" (touchstart)="initiateKeyboard()" #searchBarButton>
</div>

您只需要记住iPhone可能会缩放屏幕，因此您需要调整临时输入的参数。

工作解决方案： https ://inputfocus.vercel.app/

Answer 6

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

IOS在输入焦点上显示键盘

问题描述

5 个解决方案

解决方案1
14 2019-03-29 21:46:01

解决方案2
1 已采纳 2019-02-01 14:00:10

解决方案3
0 2019-10-22 11:23:35

解决方案4
0 2022-02-27 22:46:23

解决方案5
0 2022-05-31 19:30:54

解决方案6
-1 2019-01-29 15:52:24

IOS在输入焦点上显示键盘

问题描述

5 个解决方案

解决方案1 14 2019-03-29 21:46:01

解决方案2 1 已采纳 2019-02-01 14:00:10

解决方案3 0 2019-10-22 11:23:35

解决方案4 0 2022-02-27 22:46:23

解决方案5 0 2022-05-31 19:30:54

解决方案6 -1 2019-01-29 15:52:24

解决方案1
14 2019-03-29 21:46:01

解决方案2
1 已采纳 2019-02-01 14:00:10

解决方案3
0 2019-10-22 11:23:35

解决方案4
0 2022-02-27 22:46:23

解决方案5
0 2022-05-31 19:30:54

解决方案6
-1 2019-01-29 15:52:24