在 Angular 中页面加载（模态显示）后焦点输入后在 Safari iOS 中显示键盘

Question

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

简单的 .focus() 适用于 Android 和 iPad 的横向模式。 然而，在纵向模式和 iPhone 上，已设置焦点但未显示键盘。

我还尝试了添加并关注附加元素的解决方案，但它不适用于 Angular。 （IOS 在输入焦点上显示键盘）

@ViewChild('searchBarInput') 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.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);