解决uniapp封装input输入款组件，真机使用每次输入自动填充逗号问题

已于 2022-06-22 15:17:24 修改
阅读量1.1k 收藏
点赞数
文章标签： 前端 小程序 微信小程序 vue.js
于 2022-06-22 10:57:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fufcy/article/details/125405286
版权

出现问题图

因为子组件为了获取输入值传给父组件用@input事件，所以每次输入都自动填充逗号，把@input事件改为@blur事件就好

 改后的效果

SY_FC
关注
uniapp - [全端兼容] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
高级前端工程师
05-13 1万+
uniapp键盘无法输入小数点符号，uniapp键盘没有小数点，uniapp手机软键盘没有小数点，uniapp input设为number时键盘没有小数点，uniapp小程序调取数字键盘没有小数点解决办法，uniapp手机网页h5 安卓app 微信小程序 nvue解决键盘无法输入小数点的问题，uniapp苹果ios键盘上没小数点.怎么办，uniapp input number无法输入小数点，uniapp IOS数字键盘没有小数点，uniapp数字键盘为什么没有小数点，uniapp小程序app h5 inpu
代码智能提示,代码联想,代码自动完成,AutoComplete源码参考
09-21
代码智能提示,代码联想,代码自动完成,AutoComplete源码参考，功能非常的强大，里面有delphi的代码
修改uniapp中 input 的 placeholder 样式
最新发布
蓝枫秋千的踩坑记录
06-27 1206
最后暂时放弃先去修改输入值的属性的时候无意中发现的。比如我这边本次就是要修改。
uniapp中点击input的时候,出现页面不自动划到input及input错位的情况
gfhj778的博客
08-22 529
出现这种情况,一般是父容器的position设置了不是relative的情况,只需要排查input的父容器是否使用到fixed等等的情况。
uni-app.07.自动补全插件input-autocomplete的使用
潮汐先生的专栏
05-12 4254
uni-app自动补全插件input-autocomplete的使用前言input-autocomplete的使用1.使用HBuilderX导入插件2.运行示例项目3.存在的问题1).数据过渡曝光2).数据过多页面拉长的问题4.解决问题1).问题一解决方案2).问题二解决方案 前言 上次使用uni-app开发的司机端总算告一段落了，接下来却开始了真正的噩梦。为什么这么说呢，因为这次开发的是企业管理端，开发内容和具体的业务逻辑都要比司机端要复杂的多，只能硬着头皮上啊，谁叫咱这么「优秀」呢？！o(╥﹏╥)o 我
【Uni-app】基于uniapp编写输入学号组件，超详细！！！
ZHUYUEXG的博客
03-28 462
本组件的功能是输入学号，同时提供学号格式校验功能。当学号格式不正确时，会提示用户重新输入。通过本文，我们学习了如何基于 uniapp 开发一个输入学号的组件。在组件的开发中，我们使用了 uni-icons 提供的图标，并对组件的样式进行了配置，以便开发者在使用组件时能够自由配置组件的样式。同时，我们也介绍了如何在 uniapp 中使用该组件，希望本文能够对初学者有所帮助。
基于uniapp封装的自适应table组件
01-09
基于uniapp封装的table组件，表格宽度自适应，高度自适应，表头以及内容只传数值即可
Uniapp 多功能富文本编辑组件 可多端使用 H5插入
09-18
在这个场景下，标题提到的“Uniapp多功能富文本编辑组件”就是一个专门为Uniapp设计的，能在H5环境下使用的富文本编辑工具。 这个组件具有多端使用的特性，这意味着不仅可以在H5环境中运行，也可以在 Uniapp 支持的...
uniapp蓝牙封装.zip
07-17
描述提到，“uniapp 连接蓝牙打印机，全局封装在vuex中，使用起来方便，只需传入打印数据即可，没有安装依赖”。这表明，该封装模块是为了简化uniapp应用中与蓝牙打印机的交互。通过vuex的集成，可以实现应用程序...
使用VUE自定义组件封装数据字典实战
03-07
为了解决这个问题，我们可以封装一个组件，让其内部负责调用API获取数据，同时根据传入的字典类型自动填充选项。 封装组件的目标是接收一个数据字典的类型编码作为输入，组件内部调用后端API获取字典数据并存储，当...
vue 限制input只能输入正数的操作
10-15
无论是通过简单的正则表达式过滤，还是通过封装自定义指令的方式，亦或是使用element ui的组件属性来控制输入，都是实现这一功能的有效方法。而在实际应用中，我们需要根据项目需求和个人偏好来选择最合适的方式。...
uniapp input输入框placeholder文本右对齐
seimeii的博客
08-10 3144
uniapp input输入框placeholder文本右对齐
【uniapp】关于小程序输入框聚焦、失焦（输入法占位）的问题
feifeiyechuan的博客
09-05 4440
聊天小程序，界面带有输入框，当输入框中聚焦后，底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下，输入框此时会被输入法覆盖掉。
uniapp 微信小程序 input详解 带小数点的input、可查看密码的输入框input
maoge_666的博客
07-21 1899
uniapp 微信小程序 input详解 带小数点的input、可查看密码的输入框input
实现uniapp两个text标签一行显示
全栈工程师
04-21 3259
此时我们只需在的外层div添加display: inline-block即可实现，文本显示在一行。背景，uniapp自带的标签默认是不在一行的，需要实现一行显示。通过查看computed，发现是一个display属性造成的。
uniapp确认提示框；uniapp判断输入框值是否符合正常手机号，身份证号
m0_73481765的博客
09-22 2325
根据具体的确认需求，你可以自定义提示框的内容和按钮的文本，并根据用户的选择来执行相应的操作。在uni-app中，你可以使用正则表达式来判断输入框的值是否符合正常的手机号和身份证号格式。你可以根据实际需求，在相应的回调函数中执行你的业务逻辑。你可以根据自己的需求将以上代码放入相应的事件处理函数中，以便在用户输入时进行验证。根据用户的选择，你可以执行相应的操作。在这个示例中，我们在页面上放置了一个按钮，当用户点击按钮时会触发。在示例中，当用户点击了确定按钮时，我们调用了。在该方法中，我们调用了。
uni-app开发小程序：文本信息的完全显示（回车换行、连续空格、数字&英文换行）
weixin_48596030的博客
04-24 2249
/
uniapp开发微信小程序时input标签@input事件在微信小程序真机调试不管用。
m0_67584973的博客
04-07 1521
uniapp开发微信小程序时input标签@input事件在微信小程序真机调试不管用，哪些开发时踩过的坑。
【uniapp 单个文字输入框（方格单字输入）】
qq_31629679的博客
06-30 1990
「类似作文稿单字输入，类似密码输入框，可输入文字」focusClick()方法用于聚焦。focusClick()方法用于聚焦。在输入框上面添加单个字输入UI。
uniapp中input输入文字margin修改
03-29
要修改uniapp中input输入文字的margin，可以通过以下步骤： 1. 在input组件中添加一个class属性，例如： ```html <uni-input class="my-input"></uni-input> ``` 2. 在样式文件（如App.vue中的style标签或单独的样式文件）中添加对该class的样式定义，例如： ```css .my-input input { margin-top: 10px; margin-bottom: 10px; } ``` 这将会给input元素添加上下10px的margin。 注意：由于uni-input组件本身是一个封装了原生input的组件，因此需要使用`.my-input input`选择器来选择内部的input元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值