学习笔记——uni-app在APP端input标签聚焦同时不显示软键盘

---

在使用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)
				}
			})
		},
    }
}

---

以上代码就可以实现聚焦文本框时不会弹出软键盘。