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

Question

Angular 2 + Typescript Web app：

问题如下：

我发现，在使用@ViewChild聚焦元素或通过标签或 id 获取元素后.focus()，它并没有暴露 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>

因此，输入位于名为smb-component的mr-navbar子项中，即：

<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;
}