uniapp获取输入框的值（【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能）

（一）效果图

（二）使用组件说明

组件使用的是uview组件
    
    
，Keyboard 键盘和MessageInput 验证码输入两个组件配合使用    
    
   。

<u-keyboard closeOnClickOverlay :focus="true" ref="uKeyboard" :tooltip="false" :random="true" mode="number" :dotDisabled="true" :show="popupShowPay" @change="onChange" @backspace="onBackspace" @close="popupShowPay = false" > <view class="qinshuru">请输入支付密码</view> <u-code-input v-model="payPassword" :maxlength="6" dot size="80"></u-code-input> </u-keyboard>

keyboard属性：

通过mode参数定义键盘的类型     


     


   ，v-model绑定一个值为布尔值的变量 




 




 

，我绑定的是showKeyboard变量

   

   

，控制键盘的弹出与收起；

mode = number (默认值)为数字键盘     

     

  ，此时顶部工具条中间的提示文字为"数字键盘"

mode = car 为汽车键盘  




  




  
，此时顶部工具条中间的提示文字为"车牌号键盘"

mode = card 为身份证键盘


  


  


，此时顶部工具条中间的提示文字为"身份证键盘"

通过tooltip参数配置是否显示显示顶部的工具条     
     
 ，默认为true

通过tips参数修改工具条中间的提示文字

通过show-tips可以控制是否显示工具条中间的文字

通过cancelBtn参数配置是否显示工具条左边的"取消"按钮

通过confirmBtn参数配置是否显示工具条右边的"完成"按钮

通过dot-enabled(默认为true)参数配置   




   




   ，设置是否显示键盘的点(“.    
    
   ”)按键



 



 



，只在"mode = number"时生效          ，因为车牌号和身份证键盘    




    




    ，用不到"."这个按键

设置default 属性













，内容将会显示键盘的工具条上面          ，可以结合MessageInput 验证码输入组件实现类似支付宝输入密码时     



     



    ，上方显示输入内容的功能












，也就是放在u-keyboard标签内的view和u-message-input标签

keyboard事件：

输入值是通过组件的change事件实现的
    
    
，组件内部每个按键被点击的时候     


     


   ，组件就会发出一个change事件 




 




 

，回调参数为点击的按键的值 


     


     

。

通过backspace事件监听键盘退格键的点击

   

   

，通过修改父组件的值实现退格的效果     

     

  ，见下方示例

注意：点击退格键(也即删除键)不会触发change事件

（五）js代码实现

数据：

data() { return { popupShowPay: false, payPassword: //输入的密码 } },

事件：

按钮点击显示： async save() { const params = { price: this.price, blindBoxId: this.blindboxId, payPassword: this.payPassword, } const res = await this.$http.sales.upBlindbox(params) this.$refs.upDialogRef.isShowDialog = false this.popupShowPay = false this.getProductDetail() }, confirmUpDown() { this.popupShowPay = true this.payPassword = this.$refs.upDialogRef.isShowDialog = false // return }, onBackspace(e) { if (this.payPassword.length > 0) { this.payPassword = this.payPassword.substring(0, this.payPassword.length - 1) } }, onChange(val) { if (this.payPassword.length < 6) { this.payPassword += val } if (this.payPassword.length >= 6) { this.finish() //封装的结束函数  




  




  
，后续还有请求接口和判断 } }, finish() { this.showKeyboard = false //可以放请求的接口及付款后的判断等 this.save() },