当 focus() 不起作用时在设备中显示软键盘

Question

Angular 2 + Typescript 网络应用：

问题如下：

我发现，在使用 @ViewChild 聚焦元素或使用 .focus() 通过标签或 id 获取元素后，它并没有暴露 iOS 和 Android 设备中的软键盘。

我发现问题是在元素再次显示后使用*ngIf 或display: none，由于某种原因它不会触发设备中的软键盘。

一种解决方法是设置 [ngClass] 来设置样式，例如： opacity: 0; 加上删除边距和填充。但是这种方式在聚焦和曝光键盘时会滚动。 所以我只需要添加一个position: absolute + bottom: 9999px 来避免滚动。

我想知道我是否可以为此使用不同的（不那么老套的）解决方案

谢谢！

编辑：

隐藏元素是它的父级父级：

<mr-navbar [ngClass]="{'local-fixed-header': isHeaderFixed(), 'local-non-fixed-header': !isHeaderFixed()}" *ngIf="canShowHeader()"></mr-navbar>

所以输入在mr-navbar 的一个子元素中，称为smb-component，即：

<input id="searchInput" #searchInputMobile placeholder="{{ Home.SEARCH_HELP_TEXT_MOBILE | translate }}" [(ngModel)]="searchText" (focus)="onSearchInputFocus($event)" (focusout)="onSearchInputFocusOut($event, Home.SEARCH_HELP_TEXT_MOBILE)" (keyup)="loadSearchModalWithInput($event)" class="search-input visible-xs" tabindex="{{ searchTabIndex }}"/>

Answer 1

在 HTML 中：

<p *ngIf="editing != id" (dblclick)="display(id)">
    {{title}}
</p>
<input #input *ngIf="editing===id" [value]="title" (blur)="hide()" >

在你的课堂上：

  ...
  @ViewChild('input') private input;
  shouldFocus = false;
  ...
  ngAfterViewChecked() {
    if (this.shouldFocus) {
        this.input.nativeElement.focus();
    }
    this.shouldFocus = false;
  }

display(index) {
    this.editing = index;
    this.shouldFocus = true;
  }

  hide() {
    this.editing = null;
    this.shouldFocus = false;
  }