在项目需求中,有须要用到输入框在进入这个页面的时候就自动定位获取这个输入框的焦点。
查了许多资料,也问了ionic3的大神,现将知识点记录以下:html
使用autofocus="true"属性值
效果:
⑴在网页端浏览,能够自动获取焦点了,这个方式应该对只须要web端的同窗有效。但使用ionic3框架的目的应该是为了制做移动端吧。
⑵在移动端能够获取焦点,但随后就失去焦点了。显然,移动端的获取焦点这个方式是不可行的。web
这也是我找到设置焦点大多数人采用的方式。那么应该是找对方向了。
方式:整体思想,找到这个输入框节点,而后进行setfocus()获取焦点。
⑴网友的代码大同小异,但第一步确定是在页面的html文件中加入输入框。个人案例代码以下:框架
<ion-input #productID id="user_name" placeholder="产品编号"style="padding-left: 15px"></ion-input>
⑵以后就是在页面的ts文件中对这个输入框进行焦点设置
①找到这个节点ionic
@ViewChild('productID ') myInput ;
②对这个节点进行设置
在这里,分析目的:进入页面就获取焦点,这个应该是须要写在页面的生命周期即钩子里的。
这里有不一样的写法,好比:ionViewDidLoad(),constructor(),ngOnInit()等等。这里主要介绍一下不一样的页面,获取焦点不一样的写法。
写在ionViewDidLoad()方法里,对于启动页的焦点获取能够实现。但当页面是进行跳转的页面时,这个方法要么没有获取焦点要么获取焦点一段时间后就失焦了。代码:this
ionViewDidLoad() { setTimeout(() => { this.myInput.setFocus();//为输入框设置焦点 },150); }
写在ionViewDidEnter()方法里,这个方法是当进入页面时触发。这个方法对于进行跳转的页面或启动页均有效。代码:code
ionViewDidEnter() { setTimeout(() => { this.myInput.setFocus();//为输入框设置焦点 },150); }
存疑:ionViewDidLoad估计是在应用启动的时候就已经所有加载了全部页面,以后在进行跳转的时候触发了其余的事件,因此致使的失焦。但这也是猜测,请大神多多指教。htm