##頁面元素 ``` <input type="text" ref="elInput"/>

 

<div style="margin-top:20px;" @click="confession()" ref="elBtn">點選使input聚焦 </div> ```

 

##js程式碼 ``` methods(){ confession(){ this.$refs.elInput.focus()//顯示鍵盤 } } ```

 

上述程式碼在是有效的，但是對於input元素不是一直存在頁面上，是動態顯示的，上述方法就會失效

 

##頁面元素 ``` <input v-show="isShow" type="text" ref="elInput"/> <div style="margin-top:20px;" @click="confession()" ref="elBtn">點選使input聚焦 </div> ```

 

##js程式碼 ``` data() { return { isShow:false } },

 

methods(){ confession(){ this.isShow=true this.$nextTick(function(){ this.$refs.elInput.focus()//顯示鍵盤 }) } } ```

 

上述情況，ios下input聚焦是失效的，可以使用下面的方法(讓input一直都在頁面中) 將input寫在頁面上，利用定位給input顯示在使用者看不到的地方，當用戶點選按鈕時，將input定位到指定位置，顯示出來 也可以將input透明度設為0，當用戶點選按鈕時，將input的透明對設為1

##頁面元素 ``` <input :class="{'is-show':isShow}" type="text" ref="elInput"/> <div style="margin-top:20px;" @click="confession()" ref="elBtn">點選使input聚焦 </div> ```

 

##js程式碼 ``` data() { return { isShow:false, } },

 

methods(){ confession(){ this.isShow=true this.$refs.elInput.focus()//顯示鍵盤 } }

 

<style lang="less" scoped> input{ position:relative; left:-1000px; } .is-show{ left:0; } </style> ```

 

上面的方法驗證成功，注意，confession方法裡面的 this.$refs.elInput.focus()這句程式碼不能放在非同步或函式裡面，否則也會失效

 

原因在於ios有所限制： 尋常程式碼裡的focus不會生效，除了在某個UI事件（例如click, touchend等）的直接執行環境中呼叫focus

 

注意這個直接環境，它的意思是如果你在setTimeout, promise等非同步方式中執行了focus，依然是無效的。

 

ios上述限制是出於安全機制的考慮

 

ios上只有使用者互動觸發的focus事件才會起效，而延時回撥的focus是不會觸發的