记录一下自己第一次用uView中的u-message-input验证码组件问题

最新推荐文章于 2024-07-01 17:30:24 发布
最新推荐文章于 2024-07-01 17:30:24 发布
阅读量476 收藏
点赞数
文章标签： uniapp javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56134581/article/details/131925528
版权

最近公司的uniapp小程序项目需要加个输入卡密然后给自己账号充值积分的功能，但是领导要求做成那种有框的那种效果，所以就用到了u-message-input组件，但是u-message-input唤起的键盘只能输入数字，无法输入字母，百度了一下找到一个方法：修改源码

因为我是用npm 方式安装的，所以在node_modules中找到封装的组件，将type类型换成text 就可以输入字母了

然后还需要自动唤起手机键盘的功能，使用focus属性设置为ture获取焦点来触发手机键盘

 

刚学前端的小李
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp uView u-picker组件三级联动Demo
02-12
- 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） - 3、编辑的时候，第一列数据不变（得高亮对应的行）；第二列的...
uview中u-picker实多级选择.zip 下载即用
10-24
只需要复制组件框架，data中定义的数据，以及methods中的方法即可实现； 兄弟们，不敢骗你们，我找了好久，好多假的，没效果的，不如直接下载我的，...有问题可随时联系，不容易，找了几天u-picker三级联动的使用方法。
自定义键盘支付：u-keyboard、u-message-input
sunluyi的博客
03-18 1838
<!-- 余额支付输入密码 --> <u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false" v-model="paypasswordShow" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @bac
uview组件中使用MessageInput 验证码输入和Keyboard 键盘制作的简单支付密码输入框
子玉的博客
12-21 616
【代码】uview组件中使用MessageInput 验证码输入和Keyboard 键盘制作的简单支付密码输入框。
uniapp 开发抖音小程序处理uview1的u-message-input键盘收缩后不弹出问题，主要原因是键盘收缩时，focus依旧是true
最新发布
weixin_57751593的博客
07-01 147
找到node_modules中uview-ui的u-message-input组件增加 @keyboardheightchange="handleKeyboardChange"methods相应更改。使用组件的部分按此更改。
input 框 重置
weixin_30849403的博客
06-21 894
input框重置，啥都不说，直接上代码，简单粗暴 顺便告知，input里number框的上下箭头怎么去除。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <...
uniapp中引用uView后，使用u-input标签的type=‘number‘在小程序失效
weixin_42884605的博客
10-17 2553
uniapp
uview左滑组件 group-swipe-action-item：修复bug，左滑删除当前行，下一项自动打开左滑删除场景
11-26
在"uview左滑组件bug修复"这个标签下，我们可以推测这个更新是uView的一次小版本迭代，旨在提升组件的稳定性和用户体验。对于使用uView的开发者来说，及时更新到这个修复版本是必要的，以避免遇到类似问题并保持应用...
change-uview:修改uview-ui组件的组价
03-23
在IT行业中，自定义和修改开源UI框架是常见的需求，以适应...通过`change-uview`，我们可以看到如何将uview-ui的选项卡组件转变为竖向导航，这是一个很好的学习实践案例，有助于提升开发者在自定义UI组件方面的技能。
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
input文本框输入框智能文字提示
qq_26673953的博客
02-26 1254
html5属性 试试就知道很智能
uniapp使用uview实现弹出键盘输入密码/验证码功能
林啾啾的博客
12-26 7911
文章目录（一）效果图（二）使用组件说明（三）HTML代码及涉及到的属性解释keyboard属性：keyboard事件：MessageInput属性：MessageInput事件：（四）css样式（五）js代码实现数据：事件： （一）效果图 （二）使用组件说明 组件使用的是uview组件，Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 uview官方文档： Keyboard 键盘：https://v1.uviewui.com/components/keyboard.html
uView——uview 中 u-input 父子组件传值使用
qq_43201350的博客
01-13 503
uView——uview 中 u-input 父子组件传值使用
uniapp中的uview组件库丰富的Keyboard 键盘 用法
精通前端技术，了解后端接口
12-29 2589
打开键盘，按键的顺序都是随机的，该功能默认是关闭的。注意：点击退格键(也即删除键)不会触发。参数定义键盘的类型，
vue 文本输入框只允许输入字母、数字、不允许输入特殊字符
热门推荐
^_^
08-31 2万+
一、基本结构 <input type="text" v-model="note" maxlength="18"> <script> export default { data () { return { note: '', } } } </script> 二、监听表单输入的内容 watch: { // 只允许输入字母 note (newValue, oldValue) { console.l..
uniapp中uview组件丰富的Code 验证码输入框的使用方法
精通前端技术，了解后端接口
01-02 2228
获取前，参数为start-text，默认值为"获取验证码"倒计时期间，参数为，默认为"X秒重新获取"，这里的"x"(大小写均可)，将会被倒计的秒数替代倒计时结束，参数为end-text，默认值为"重新获取"
Vue的大坑 input手动赋值后无法修改问题
Tiger_Paul的博客
03-09 4364
当获取数据之后，手动赋值给input，会出现渲染成功，能读取数据，但是无法修改情况。代码如下： /* 根据ID查询返回订单信息 */ async editOrdersAddress(orderId) { const { data: res } = await this.$http.get(`orders/${orderId}`) if (res.meta.status !== 200) { this.$message.error('查询信息失败')
uni-app输入密码
杨葱儿
11-18 741
<template> <view> <view class="u-padding-40"> <u-button type="success" @click="showPop(true)"> <u-icon name="red-packet"></u-icon> <text class="u-padding-l...
uview组件库里的u--input组件怎么使用customStyle
07-13
在uview组件库中，u--input组件提供了customStyle属性，可以用于自定义样式。您可以使用customStyle属性来设置u--input组件的字体样式。 使用customStyle属性的方法如下所示： ```html <u--input customStyle=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值