Vue項(xiàng)目中input框focus時不調(diào)出鍵盤問題的解決
更新時間：2022年04月07日 14:33:55 作者：熱愛°可抵歲月漫長
這篇文章主要介紹了Vue項(xiàng)目中input框focus時不調(diào)出鍵盤問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
input框focus時不調(diào)出鍵盤問題
在移動端，實(shí)現(xiàn)input框獲得焦點(diǎn)的同時不會喚起手機(jī)鍵盤。
親測有效?。?！
<input type="text" placeholder="收貨地址" v-model="address3" @focus.prevent="showcountF" ref="address" />
?showcountF(){
? ? ? this.showcount=true;
? ? ? ?this.$refs.address.setAttribute('readonly', 'readonly');
? ? },自動獲取input焦點(diǎn)(內(nèi)含ios不能喚起鍵盤解決方法)
為了實(shí)現(xiàn)自動喚起鍵盤，再點(diǎn)擊寫評論之后會出現(xiàn)input框緊接著吊起鍵盤
最開始的用法
在input出現(xiàn)之后加上
this.$nextTick(() => {
?? ?this.$refs.input.focus()
})為了頁面的其他功能，我在上述代碼之后重新調(diào)用了加載頁面數(shù)據(jù)的方法，發(fā)現(xiàn)該方法不生效了，具體解決辦法用延時器
setTimeOut(()=>{
?? ?this.$refs.input.focus()
}, 500)鍵盤正常喚起！
ps：延時時間不能過短，因?yàn)橛许撁嬷匦落秩拘Ч?，延時時間過短會導(dǎo)致延時不在生效！
最后，該方法在ios中不可用，因?yàn)閕os為了保護(hù)安全，禁止自動獲取輸入框focus方法！
如果想要解決ios不生效辦法
在App的配置文件（config.xml）,里面默認(rèn)會有一句
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
這里面的大概意思就是，鍵盤的顯示需要用戶去觸發(fā)，而且是設(shè)置為true的！?。∷灾恍枰裻rue改為false即可
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React和Vue實(shí)現(xiàn)路由懶加載的示例代碼
路由懶加載是一項(xiàng)關(guān)鍵技術(shù),它可以幫助我們提高Web應(yīng)用的加載速度,本文主要介紹了React和Vue實(shí)現(xiàn)路由懶加載的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
Vue3之getCurrentInstance與ts結(jié)合使用的方式
這篇文章主要介紹了Vue3之getCurrentInstance與ts結(jié)合使用的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
關(guān)于element-ui?select?下拉框位置錯亂問題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯亂問題解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了6個vue前端常用的工具類,可直接復(fù)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案
這篇文章主要介紹了詳解Vue微信授權(quán)登錄前后端分離較為優(yōu)雅的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學(xué)習(xí)吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue-model實(shí)現(xiàn)簡易計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了vue npm install 安裝某個指定的版本操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文主要介紹了vue3.x頁面功能拆分方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
在vue中，我們?nèi)绾瓮ㄟ^請求接口來訪問后端的數(shù)據(jù)呢?在這里簡單總結(jié)了一個小示例，對vue請求后端數(shù)據(jù)實(shí)例代碼感興趣的朋友一起看看吧2022-09-09