当前位置: 首页 > Web前端 > HTML5

ionic3ion-input进入页面自动获取焦点

时间:2023-04-05 18:00:07 HTML5

项目需求中,需要使用输入框在进入该页面时自动定位并获取输入框的焦点。查了很多资料,也请教了ionic3的高手,现将知识点记录如下:1.能不能直接设置ion-input的属性值,达到自动获取焦点的目的?使用autofocus="true"属性值效果:⑴在浏览网页时可以自动获得焦点。这种方法对于只需要web端的同学应该有效。但是使用ionic3框架的目的应该是为了做移动端。⑵移动端可以获取焦点,但随后失去焦点。显然,在移动端获取焦点的方式是行不通的。2.代码设置获取焦点这也是我发现大多数人用来设置焦点的方式。那么它应该是在正确的方向。方法:整体思路,找到输入框节点,然后执行setfocus()获取焦点。(1)网友的代码大同小异,但是第一步肯定是要在页面的html文件中添加一个输入框。我的案例代码如下:(2)之后,这是在页面的ts文件设置输入框的焦点①找到这个节点@ViewChild('productID')myInput;②在这里设置这个节点,分析目的:进入页面时获取焦点,这个应该写在页面的生命周期中,也就是hook中。这里有不同的写法,比如:ionViewDidLoad()、constructor()、ngOnInit()等。这里主要介绍不同的页面,不同的写法获取焦点。写在ionViewDidLoad()方法中,可以实现启动页的焦点获取。但是当页面是跳转页面时,这种方法要么得不到焦点,要么一段时间后失去焦点。代码:ionViewDidLoad(){setTimeout(()=>{this.myInput.setFocus();//为输入框设置焦点},150);}写在ionViewDidEnter()方法中,进入页面时触发该方法。此方法对跳转页面或启动页面有效。代码:ionViewDidEnter(){setTimeout(()=>{this.myInput.setFocus();//为输入框设置焦点},150);}疑点:ionViewDidLoad估计是在应用启动的时候加载了所有的页面,然后在跳转的时候触发了其他事件,所以造成了失焦。不过这也是猜想,请赐教。