Vue項目中input框focus時不調(diào)出鍵盤問題的解決
更新時間：2022年04月07日 14:33:55 作者：熱愛°可抵歲月漫長
這篇文章主要介紹了Vue項目中input框focus時不調(diào)出鍵盤問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
input框focus時不調(diào)出鍵盤問題
在移動端，實現(xiàn)input框獲得焦點的同時不會喚起手機(jī)鍵盤。
親測有效！??！
<input type="text" placeholder="收貨地址" v-model="address3" @focus.prevent="showcountF" ref="address" />
?showcountF(){
? ? ? this.showcount=true;
? ? ? ?this.$refs.address.setAttribute('readonly', 'readonly');
? ? },自動獲取input焦點(內(nèi)含ios不能喚起鍵盤解決方法)
為了實現(xià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：延時時間不能過短，因為有頁面重新渲染效果，延時時間過短會導(dǎo)致延時不在生效！
最后，該方法在ios中不可用，因為ios為了保護(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue手寫橫向輪播圖的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2 Element Schema Form 配置式生成表單的實現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
elementui中tabel組件的scope.$index的使用及說明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了使用vue2實現(xiàn)購物車和地址選配功能,本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03
vue使用pdf-dist實現(xiàn)pdf預(yù)覽以及水印添加
這篇文章主要為大家詳細(xì)介紹了vue如何使用pdf-dist實現(xiàn)pdf預(yù)覽以及水印添加的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié)，非常具有實用價值，需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)驗證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了Vue3組件的開發(fā)，上一篇文章我們價紹了Vue3（三）網(wǎng)站首頁布局開發(fā)，今天繼續(xù)上篇內(nèi)容展開組件的開發(fā),需要的朋友可以參考一下2021-11-11
這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要給大家介紹了關(guān)于vue滾動條滾動到頂部或者底部的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08