Question

Angular 2 + Typescript网络应用程序：

问题如下：

我发现，在使用@ViewChild聚焦元素或使用.focus()获取标记或ID后，它不会暴露iOS和Android设备中的软键盘。

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

解决方法是设置[ngClass]以设置以下样式： opacity: 0;加上删除边距和填充。但这种方式是在对焦和曝光键盘时滚动。所以我不得不添加position: absolute + bottom: 9999px以避免滚动。

我想知道是否有一个我可以用于此

的不同（较少hacky）解决方案

谢谢！

编辑：

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

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

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

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

当焦点（）不起作用时，在设备中显示软键盘

1 个答案: