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

本是古典何须时尚 2022-03-26 07:19 255阅读 0赞

本文首发于2018-4-23 [https://segmentfault.com/a/1190000014357947][https_segmentfault.com_a_1190000014357947]

在项目需求中，有需要用到输入框在进入这个页面的时候就自动定位获取这个输入框的焦点。  
查了许多资料，也问了ionic3的大神，现将知识点记录如下：

## 1、能不能直接设置ion-input的属性值来达到自动获取焦点的目的 ##

使用autofocus="true"属性值  
效果：  
⑴在网页端浏览，可以自动获取焦点了，这个方式应该对只需要web端的同学有效。但使用ionic3框架的目的应该是为了制作移动端吧。  
⑵在移动端可以获取焦点，但随后就失去焦点了。显然，移动端的获取焦点这个方式是不可行的。

## 2、代码设置获取焦点 ##

这也是我找到设置焦点大多数人采用的方式。那么应该是找对方向了。  
方式：总体思想，找到这个输入框节点，然后进行setfocus()获取焦点。  
⑴网友的代码大同小异，但第一步肯定是在页面的html文件中加入输入框。  
我的案例代码如下：  
<ion-input \#productID id=“user\_name” placeholder="产品编号"style=“padding-left: 15px”>  
⑵之后就是在页面的ts文件中对这个输入框进行焦点设置  
①找到这个节点  
@ViewChild('productID ') myInput ;  
②对这个节点进行设置  
在这里，分析目的：进入页面就获取焦点，这个应该是需要写在页面的生命周期即钩子里的。  
这里有不同的写法，比如：ionViewDidLoad()，constructor(),ngOnInit()等等。这里主要介绍一下不同的页面，获取焦点不同的写法。  
写在ionViewDidLoad()方法里，对于启动页的焦点获取可以实现。但当页面是进行跳转的页面时，这个方法要么没有获取焦点要么获取焦点一段时间后就失焦了。代码：

ionViewDidLoad() {
    setTimeout(() => {
      this.myInput.setFocus();//为输入框设置焦点
    },150);
    }

写在ionViewDidEnter（）方法里，这个方法是当进入页面时触发。这个方法对于进行跳转的页面或启动页均有效。代码：

ionViewDidEnter() {
    setTimeout(() => {
      this.myInput.setFocus();//为输入框设置焦点
    },150);

\}  
存疑：ionViewDidLoad估计是在应用启动的时候就已经全部加载了所有页面，之后在进行跳转的时候触发了其他的事件，所以导致的失焦。但这也是猜想，请大神多多指教。

[https_segmentfault.com_a_1190000014357947]: https://segmentfault.com/a/1190000014357947