ionic3 ion-input進入頁面自動獲取焦點

在項目需求中,有須要用到輸入框在進入這個頁面的時候就自動定位獲取這個輸入框的焦點。
查了許多資料,也問了ionic3的大神,現將知識點記錄以下:html

一、能不能直接設置ion-input的屬性值來達到自動獲取焦點的目的

使用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

相關文章
相關標籤/搜索