我进入页面时无法将焦点设置到我的 <ion-input>
Posted
技术标签:
【中文标题】我进入页面时无法将焦点设置到我的 <ion-input>【英文标题】：Not been able to set focus to my <ion-input> as i enter the page 【发布时间】：2017-07-30 08:00:00 【问题描述】：我希望在我进入页面时将焦点设置在我的 <ion-input> 上
这是我的打字稿代码：
import Component, Input, ViewChild,ElementRef,Renderer from '@angular/core';
import NavController, PopoverController, NavParams, ViewController, ModalController from 'ionic-angular';
@Component(
selector: 'page-comments',
templateUrl: 'comments.html'
)
export class CommentsParentPage
@ViewChild('input') myInput;
constructor(public navCtrl: NavController,private renderer: Renderer,
private elementRef: ElementRef, public modalCtrl: ModalController)
ionViewLoaded()
setTimeout(() =>
let element = this.elementRef.nativeElement.querySelector('input');
this.renderer.invokeElementMethod(element, 'focus', []);
,150);
这就是我对我的html 文件所做的：
<ion-item>
<ion-input set-focuser type="text" placeholder="Write Your Comments" [(ngModel)]="addComment"></ion-input>
</ion-item>
每当我进入我的应用程序的这个页面时，我都希望打开键盘并将焦点设置在ion-input 上
我的config.xml 包括：
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
package.json
"name": "sample app",
"author": "",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts":
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
,
"dependencies":
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic-native/core": "^3.4.4",
"@ionic-native/keyboard": "^3.4.4",
"@ionic/cloud-angular": "^0.10.0",
"@ionic/storage": "1.1.7",
"angular2-moment": "^1.1.0",
"google-libphonenumber": "^2.0.14",
"ionic-angular": "2.0.0-rc.4",
"ionic-gallery-modal": "0.0.7",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
,
"devDependencies":
"@ionic/app-scripts": "1.0.0",
"typescript": "2.0.9"
,
"cordovaPlugins": [
"ionic-plugin-keyboard",
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"cordova-sqlite-storage",
"cordova-plugin-x-toast",
"cordova-plugin-camera",
"cordova-plugin-compat",
"cordova-plugin-image-picker",
"cordova.plugins.diagnostic",
"id": "phonegap-plugin-push",
"locator": "phonegap-plugin-push",
"variables":
"SENDER_ID": "461076790064"
,
"cordova-plugin-contacts",
"ionic-plugin-deploy",
"cordova-plugin-x-socialsharing",
"locator": "https://github.com/napolitano/cordova-plugin-intent",
"id": "com.napolitano.cordova.plugin.intent"
,
"cordova-plugin-screen-orientation",
"cordova-plugin-file",
"cordova-plugin-file-transfer"
],
"cordovaPlatforms": [
"platform": "android",
"version": "",
"locator": "android"
],
"description": "ionic2: An Ionic project"
【问题讨论】：
this.myInput.setFocus() 不起作用？
不，这就是为什么我使用 let element = this.elementRef.nativeElement.querySelector('input'); this.renderer.invokeElementMethod(element, 'focus', []);
你有什么错误
不，没有错误，它只是不起作用
在 setTimeout 处理程序中，您可以尝试：(1) this.myInput.nativeElement.focus(); 或 (2) element.focus();。并且可能将超时时间增加到 1000 毫秒以进行测试。
【参考方案1】：
你可以试试简单的方法。
<div ng-init="getfocus()">
<ion-input id="myAnchor" type="text" placeholder="Write Your Comments"/>
</div>
在 js 文件中使用 ng-init 调用函数
function getfocus()
document.getElementById("myAnchor").focus();
希望此代码对您有所帮助。如果您遇到任何错误，请发表评论。
【讨论】：
这是禁用我的离子输入【参考方案2】：使用 ngAfterViewChecked：
见 plnkr here
import Component, Input, ViewChild,ElementRef,Renderer, AfterViewChecked,ChangeDetectorRef from '@angular/core';
import NavController, PopoverController, NavParams, ViewController, ModalController from 'ionic-angular';
@Component(
selector: 'page-comments',
templateUrl: 'comments.html'
)
export class CommentsParentPage implements AfterViewChecked
@ViewChild('input') myInput;
needsFocus: boolean;
constructor(public navCtrl: NavController,private renderer: Renderer,
private elementRef: ElementRef, public modalCtrl: ModalController,
private _changeDetectionRef: ChangeDetectorRef)
ionViewDidEnter()
this.needsFocus = true;
public ngAfterViewChecked(): void
if (this.needsFocus)
this.needsFocus = false;
this.myInput.setFocus();
this._changeDetectionRef.detectChanges();
【讨论】：
@devanshsadhotra 我不好，你应该在 ionViewDidEnter 中设置布尔值 true。我更新了示例并添加了一个 Plnkr 来展示 还要确保在你的 html 中识别输入（您可以使用Directive 进行操作，如下所示。希望代码是不言自明的。如果您有任何问题，请在下方评论。
与Git Repo code一起玩。
您可以在 Ionic View 上查看此内容：Id = F5F367AE
注意：只需点按My Page。
set-focuser.ts
import Directive, Renderer, ElementRef from '@angular/core';
import Keyboard from '@ionic-native/keyboard';
@Directive(
selector: '[set-focuser]' // Attribute selector
)
export class SetFocuser
constructor(private renderer: Renderer, private elementRef: ElementRef, public keyboard: Keyboard)
ngAfterViewInit()
const element = this.elementRef.nativeElement.querySelector('input');
// to delay
setTimeout(() =>
this.renderer.invokeElementMethod(element, 'focus', []);
this.keyboard.show();
, 500);
.html
<ion-input set-focuser type="text"></ion-input>
app.module.ts
import SetFocuser from "../components/set-focuser/set-focuser";
@NgModule(
declarations: [
SetFocuser,
],
你的 package.json 的问题
您必须删除 "ionic-native": "2.2.11", 模块。
使用"@ionic/app-scripts": "1.1.4", 而不是"@ionic/app-scripts": "1.0.0",
以上更改运行npm i
这是official package.json file。
【讨论】：
按照你的 repo 做了同样的事情，安装了离子原生键盘插件，仍然没有工作 你能用package.json文件显示你的代码吗？请把它放在你原来的帖子上。
或者你能把你的实现的轻量级版本放在 Git repo 上吗？我会让它工作的。
我们是否应该将 set-focuser.ts 导入 app.module.ts
是的，在declarations下。请查看我的git repo (app.module.ts)。【参考方案4】：
我知道这是一个老话题，但我遇到了类似的问题（在我的情况下，出现错误：'setFocus 不是函数'。我的解决方案可能会在未来帮助某人（Ionic v5）。
在这种情况下，我生成了一个组件而不是一个页面，因此我没有该组件的 module.ts 文件。我必须将组件添加到父页面的声明中。
declarations: [
MyModalComponent
]
然后在组件的 typescript 文件中，添加以下行并按预期工作：
@ViewChild('myInputsReference', static: false) inputEl: IonInput;
ionViewDidEnter()
this.setFocusOnInput();
setFocusOnInput()
setTimeout(_ => this.inputEl.setFocus(), 200);
【讨论】：
以上是关于我进入页面时无法将焦点设置到我的 <ion-input>的主要内容，如果未能解决你的问题，请参考以下文章