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