uniapp：easyinput输入框数据正则处理后，逻辑层更新，但没有渲染到输入框

皮皮虾-coding

已于 2022-05-11 20:21:29 修改

阅读量2.4k

点赞数 3

分类专栏： uniapp 文章标签： uniapp easyinput

于 2022-05-11 20:15:11 首次发布

本文链接：https://blog.csdn.net/qq_41612675/article/details/124716950

版权

本文讲述了在使用Easyinput组件时遇到的空格去除问题，通过修改`onInput`方法加入`$nextTick`和在特定场景下使用`setTimeout`，确保数据绑定和正则校验在逻辑和渲染层同步生效的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：需求要求密码输入框不能输入空格，于是找到easyinput的 trim API，但是通过测试，发现去除空格的方法时不时“失效”，哪怕使用 trim="all"，依旧会存在最后面的空格在输入框没有自动删除的情况。然而通过打印绑定值发现，绑定值生效，并没有空格，但没有更新到输入框。
通过查看easyinput的代码和生效过程，发现是原生input赋值没有及时生效的缘故，因此我们修改下源代码：
在ui-modules中找到uni-easyinput.vue，修改onInput方法：

给赋值的val增加this.$nextTick()

	onInput(event) {
   
			let value = event.detail.value;
			// 判断是否去除空格
			if (this.trim) {
   
				if (typeof(this.trim)

最低0.47元/天解锁文章