当前位置: 代码迷 >> 综合 >> uniapp APP开发软键盘禁止弹起,PDA用硬件键盘按钮输入数量
  详细解决方案

uniapp APP开发软键盘禁止弹起,PDA用硬件键盘按钮输入数量

热度:116   发布时间:2023-10-14 05:01:17.0

需求:input标签聚焦事件后默认弹起软键盘,PDA屏幕过小的情况下不需要弹起软键盘(软键盘弹起盖过80%的屏幕)

问题点:使用键盘监听事件,监听输入的内容,每次监听只能返回一次一个字符串

uniapp APP开发软键盘禁止弹起,PDA用硬件键盘按钮输入数量

插件市场下载链接:keyboard-listener - DCloud 插件市场uni-app 全局按键事件监听uniapp APP开发软键盘禁止弹起,PDA用硬件键盘按钮输入数量https://ext.dcloud.net.cn/plugin?id=2548 

实现原理:用插件监听键盘事件:过滤数字键和删除按键(只能输入数字和删除键)

把识别的数字加入数组中,按删除键则调用数组pop()方法删除最后一个,最后用join()

将数组转换字符串

代码: 

            emitKeyDown(e) {
                const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
                const checkNum = arr.includes(e.key)
                ///弹出打印数量框,并且选了点了结尾数的情况要取消当前键盘输入
                if (!this.isfoucsWeight) {
                    if (checkNum) {
                        this.keydownNumPrint = [...this.keydownNumPrint, e.key]
                    } else if (e.key == 'Backspace' && this.keydownNumPrint.length > 0) {
                        this.keydownNumPrint.pop()
                        if (this.keydownNumPrint.length < 1) return this.numberValue = 0
                    } else if (e.key == 'Backspace' && this.keydownNumPrint.length < 1) {
                        return this.$uniApi.showInfoMsg(`归零`);
                    } else if (!checkNum) {
                        return this.$uniApi.showInfoMsg(`当前打印框不能输入${e.key},只能识别数字和删除键`);
                    }
                        this.numberValue = this.keydownNumPrint.join("")
                }
            },

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

this.$uniApi.showInfoMsg()是自定义封装uni.showToast

this.keydownNumPrint  是存输入按键值的数组 

此方法用于不能用input输入数字的情况下使用