角度2 /离子2 - 输入框对焦功能不存在 [英] Angular 2 / Ionic 2 - input box focus function doesn't exist

问题描述

在我的Ionic 2应用程序中，我有一个页面上有一个按钮。当你按下按钮，它会弹出一个模态屏幕，上面有一个输入框。当Modal页面打开时，我想将光标聚焦在Modal页面的输入框上，以便用户可以立即开始输入。

在我的Modal页面中，我有以下HTML

 < ;离子项> 
< ion-input #search type =textplaceholder =输入一个区域，例如Bedroom[value] =searchValue[formControl] =inputSearchControl>< / ion-input> 
< / ion-item> 
  

在我的代码中，我有以下内容：

  @ViewChild（search）inputBox; 
 
 ngAfterViewInit（）{
 
 this.inputBox.nativeElement.focus（）; $（$）
 
 this.inputSearchControl.valueChanges.debounceTime（500）.subscribe（（callbackText）=> {
 this.selectedArray = this.originalArrayBeforeAnyFiltering.filter（（item）=> {
 return（item.toLowerCase（）。indexOf（callbackText.toLowerCase（））> -1）; 
}）; 
}）; 
 
 
 
 $ b $ p 
 $ b 
因此，在 View 已经初始化之后，光标在模态上的输入框上。但是当我的代码在 View 初始化时运行时，由于函数不存在而失败： 
 
 
  $ b $ VM415：1 Uncaught TypeError：this.inputBox.focus不是函数（...）
  
 
 
 
  focus 是一个EventEmitter             
 
 
 
 bengrah 
解决方案
您需要使用 setFocus（）函数。 
 
 
  this.inputBox.setFocus （）
  
来源这个讨论 
 
 
 
同样根据文档， focus 是一个输出事件 ion-input 。
 
In my Ionic 2 app, I have a page that has a button on it. When you press the button it brings up a Modal screen with an input box on it. When the Modal page opens up, I want to focus the cursor on the input box on the Modal page so the user can start typing immediately. 

In my Modal page, I have the following HTML
<ion-item>
  <ion-input #search type="text" placeholder="Type an area e.g. Bedroom" [value]="searchValue" [formControl]="inputSearchControl"></ion-input>
</ion-item>
In my code I have the following:
    @ViewChild("search") inputBox;

    ngAfterViewInit() {

    this.inputBox.nativeElement.focus();

    this.inputSearchControl.valueChanges.debounceTime(500).subscribe((callbackText) => {
        this.selectedArray = this.originalArrayBeforeAnyFiltering.filter((item) => {
            return (item.toLowerCase().indexOf(callbackText.toLowerCase()) > -1);
        });
    });
}
So after the View has initialised, focus the cursor on the input box on the modal. But when my code runs on the View initialising, it fails due to the function not existing:


VM415:1 Uncaught TypeError: this.inputBox.focus is not a function(…)


On the console it says that focus is an EventEmitter but I'm not sure how to use this to achieve what I'm wanting.

Any help would be appreciated.

bengrah
解决方案
You need to use setFocus() function.
this.inputBox.setFocus()
Source this discussion

Also according to the docs, focus is an output event of ion-input.

                        
这篇关于角度2 /离子2  - 输入框对焦功能不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！