uniapp中input聚焦禁止軟鍵盤彈出方法
更新時間：2023年01月06日 10:15:45 作者：普通網(wǎng)友
在使用uni-app完成掃碼功能時,有時需要聚焦文本框的同時,需要軟鍵盤消失,下面這篇文章主要給大家介紹了關(guān)于uniapp中input聚焦禁止軟鍵盤彈出的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
需求：在進(jìn)入頁面時需要input聚焦，但是不彈出軟鍵盤
方法一：使用uniapp自帶方法uni.hideKeyboard()來隱藏軟鍵盤
方法二：使用readonly屬性規(guī)定輸入字段為只讀
方法三：使用document.activeElement.blur()移開焦點(diǎn)
方法四：通過div模擬input來實現(xiàn)
以上方法網(wǎng)上都有，但是都沒有解決我的需求，下面是我使用的方法
方法五：通過定時器來實現(xiàn)隱藏鍵盤
一般項目通常使用方法一就可以解決，或者日期類型也可以通過以上方法來實現(xiàn)。
我們項目有物理按鍵，不需要軟鍵盤，以上方法會導(dǎo)致進(jìn)入頁面input聚焦時鍵盤會閃一下，體驗不好，所以使用了定時器，定時觸發(fā)隱藏鍵盤來解決
在onLoad中調(diào)用方法stop
onLoad(){
let _self = this;
_self.stop()
}
methods
stop(){
var interval = setInterval(function(){
uni.hideKeyboard();//隱藏軟鍵盤
console.log('刷新')
},20);
setTimeout(() => {
clearInterval(interval);
console.log('停止刷新')
},3000);
},
通過定時來刷新，完美解決
總結(jié)
到此這篇關(guān)于uniapp中input聚焦禁止軟鍵盤彈出的文章就介紹到這了,更多相關(guān)uniapp input聚焦禁止軟鍵盤彈出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS，Android,H5,以及各種小程序（微信/支付寶/百度/頭條/?QQ?/釘釘）等多個平臺,這篇文章主要給大家介紹了關(guān)于使用uni-app打包H5的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
詳解小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)
這篇文章主要介紹了小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
ionic2自定義cordova插件開發(fā)以及使用（Android）
這篇文章主要為大家詳細(xì)介紹了ionic2自定義cordova插件開發(fā)以及使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實現(xiàn)方法
下面小編就為大家?guī)硪黄宧tml元素隨瀏覽器的大小自適應(yīng)垂直居中的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
微信小程序?qū)崿F(xiàn)默認(rèn)第一個選中變色效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)默認(rèn)第一個選中變色效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹Javascript實現(xiàn)二級下拉菜單的具體過程,需要的朋友可以參考下2014-06-06
這篇文章主要給大家介紹了關(guān)于JavaScript惰性求值的一種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
鼠標(biāo)事件的移動及移出效果都可以使用js來自定義，下面有個示例，實，效果為當(dāng)事件發(fā)生改變時背景顏色也隨著改變2014-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義帶價格顯示日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12