学习笔记——uni-app在APP端input标签聚焦同时不显示软键盘
在使用uni-app完成扫码功能时,有时需要聚焦文本框的同时,需要软键盘消失。正常情况下,聚焦文本框会弹出软键盘,而软键盘有时会过大覆盖很多内容,或者将页面其他内容顶上去。方法:这里用到了input组件一个重要的属性auto-blur<input type="text" class="scan-input" placeholder="扫描新的二维码添加物料"@confirm="addCode
·
在使用uni-app完成扫码功能时,有时需要聚焦文本框的同时,需要软键盘消失。正常情况下,聚焦文本框会弹出软键盘,而软键盘有时会过大覆盖很多内容,或者将页面其他内容顶上去。
方法:
这里用到了input组件一个重要的属性auto-blur
<input type="text" class="scan-input" placeholder="扫描新的二维码添加物料"
@confirm="addCode" autocomplete="off" @focus="changeFocus" @blur="changeBlur"
:value="inputText" :auto-blur="false"/>
<image src="../../static/images/unselected_keyboard.png" v-if="isHideKeyboard"
@tap="changeKeyboard" class="keyboard-icon"></image>
<image src="../../static/images/selected_keyboard.png" v-if="!isHideKeyboard"
@tap="changeKeyboard" class="keyboard-icon"></image>
其中image组件使用来控制在聚焦文本框时键盘是否需要显示。
默认是不需要显示的,也就是说在App上你点击文本框聚焦了,软键盘会出现再消失,以后你点击文本框后都不会再次出现软键盘。这样,你就可以扫码,并回车键执行操作。
当你点击一次image组件时,表示需要软键盘。当你再次聚焦文本框后,会弹出软键盘,这时你可以使用软键盘输入
export default {
data() {
return {
inputText: '',
isHideKeyboard: true
}
},
methods: {
// #ifdef APP-PLUS
changeFocus() {
if(this.isHideKeyboard) uni.hideKeyboard()
},
// #endif
changeKeyboard() {
this.isHideKeyboard = !this.isHideKeyboard
if(this.isHideKeyboard) uni.hideKeyboard()
},
// 扫码
addCode(e) {
this.inputText = e.detail.value
if(!this.inputText) {
uni.showToast({
title: '请输入二维码',
icon: 'none'
})
return
}
if(this.isScaning) {
this.inputText = ''
return
}
let innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.volume = 1
this.isScaning = true
uni.request({
url: this.websiteUrl + '/bom/autoScanCode',
method: 'POST',
header: {
"Content-type": "application/x-www-form-urlencoded",
withCredentials: true
},
data: {
codeNumber: this.inputText,
orderId: this.orderId,
orderNumber: this.orderNumber
},
success: async res => {
if(res.data.state == 'failed') {
innerAudioContext.src = '/static/sound/fail.mp3'
innerAudioContext.play()
uni.showToast({ title: res.data.msg, icon: 'none' })
return
}
innerAudioContext.src = '/static/sound/success.mp3'
innerAudioContext.play()
await this._getProductionList()
this._getList(this.activeId)
},
complete: res => {
this.inputText = ''
this.isScaning = false
innerAudioContext.autoplay = true
setTimeout(() => { innerAudioContext.destroy() }, 500)
}
})
},
}
}
以上代码就可以实现聚焦文本框时不会弹出软键盘。
更多推荐
已为社区贡献8条内容
所有评论(0)