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

比眉伴天荒 2022-12-26 11:27 822阅读 0赞

--------------------

> 在使用uni-app完成扫码功能时，有时需要聚焦文本框的同时，需要软键盘消失。正常情况下，聚焦文本框会弹出软键盘，而软键盘有时会过大覆盖很多内容，或者将页面其他内容顶上去。

### 方法： ###

> 这里用到了input组件一个重要的属性auto-blur

> 其中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)
    				}
    			})
    		},
        }
    }

--------------------

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