专注于Angular以后的输入（模态显示）之后，在Safari iOS中显示键盘

Question

我需要在页面加载后设置焦点和打开键盘，或显示带有输入的模式。

Simple .Focus（）在Android中工作，也可以在景观模式下在iPad中工作。 但是，在肖像模式下和iPhone焦点上设置了键盘，但未显示键盘。

我还尝试了解决其他元素并关注其他元素的解决方案，但它与Angular不起作用。 ios show键盘在输入焦点上

（ '）searchBarInput：ElementRef;

  ngAfterViewInit(): void {
    setTimeout(()=> {
      this.searchBarInput.nativeElement.focus();
      this.searchBarInput.nativeElement.click();
    },180);
  }

测试应用程序： https：//inputfocus.vercel.app/

期望是加载后，用户可以，用户可以，用户可以开始键入。 它是简化的版本 - 我需要在模态上，但是iOS上的行为相似

Answer 1

我想我找到了解决方案。
在iOS（iPhone）和iPad肖像模式下，需要通过用户操作触发focus（）。
因此，我们需要在使用单击按钮后立即设置此此模式或带有目标输入字段的新DIV。

我们可以自动创建这个新字段，设置焦点并在将重点移至目标字段后将其删除。

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

  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.vercel.app/

Answer 2

基于您的答案，我将代码抽象为指令，因此更清晰，因此无需处理事件：

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appAutoFocus]'
})
export class AutoFocusDirective {

  constructor(private elementRef: ElementRef) {

    // Create non-visible temporary input element and focus it
    const tmpElement = document.createElement('input');
    tmpElement.style.width = '0';
    tmpElement.style.height = '0';
    tmpElement.style.margin = '0';
    tmpElement.style.padding = '0';
    tmpElement.style.border = '0';
    tmpElement.style.opacity = '0';
    document.body.appendChild(tmpElement);
    tmpElement.focus();

    setTimeout(() => {
      // Focus the main (input) element, thus opening iOS keyboard
      this.elementRef.nativeElement.focus();
      document.body.removeChild(tmpElement);
    }, 0);
  }
}

只需使用它 ：在您的输入元素中：

<input type="text" appAutoFocus>

Answer 3

您第一次需要这样创建这样的函数，因此可以重复使用

focusTextInput: function(el) {
      var __tempEl__ = document.createElement('input');
      __tempEl__.style.position = 'relative';
      __tempEl__.style.top = el.offsetTop + 'px';
      __tempEl__.style.left = el.offsetLeft + 'px';
      __tempEl__.style.height = 0 + '!important';
      __tempEl__.style.opacity = 0;
      el.after(__tempEl__);
      __tempEl__.focus()
      setTimeout(() => {
        el.focus()
        el.click()
        __tempEl__.remove()
      }, 50);
    },

，然后从您想要的任何地方调用该功能

var el = document.getElementById("body-height")
// make sure you have id for the input that need to focused
focusTextInput(el);