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è)有效！??！
<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)文章
這篇文章主要介紹了Vue手寫(xiě)橫向輪播圖的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2 Element Schema Form 配置式生成表單的實(shí)現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
elementui中tabel組件的scope.$index的使用及說(shuō)明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
使用vue2實(shí)現(xiàn)購(gòu)物車和地址選配功能
這篇文章主要介紹了使用vue2實(shí)現(xiàn)購(gòu)物車和地址選配功能,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03
vue使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加
這篇文章主要為大家詳細(xì)介紹了vue如何使用pdf-dist實(shí)現(xiàn)pdf預(yù)覽以及水印添加的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue 如何添加全局函數(shù)或全局變量以及單頁(yè)面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁(yè)面的title設(shè)置總結(jié)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了Vue3組件的開(kāi)發(fā)，上一篇文章我們價(jià)紹了Vue3（三）網(wǎng)站首頁(yè)布局開(kāi)發(fā)，今天繼續(xù)上篇內(nèi)容展開(kāi)組件的開(kāi)發(fā),需要的朋友可以參考一下2021-11-11
Vue中的數(shù)據(jù)驅(qū)動(dòng)解釋
這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動(dòng)解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
vue滾動(dòng)條滾動(dòng)到頂部或者底部的方法
這篇文章主要給大家介紹了關(guān)于vue滾動(dòng)條滾動(dòng)到頂部或者底部的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08