uniapp中@input修改input内容不生效 | 过滤赋值无效 | 连续非法字符不更新的问题

前端贾公子2026-04-14 14:43

场景

现需求限制输入框只能输入大小写字母.

实现方案: 绑定v-module=A, 监听@input=onA. 在onA中使用正则replace后赋值给A.

遇到问题: 当输入任意连续的非法字符时, 输入框不变. 直到输入一个合法字符非法字符才成功被过滤.

解决方案

伪代码

复制代码

let A = ref('')

onA(e){
  const val = e.detail.value
  this.A = val // 关键在于这里, 需要使得其与之前的值不相同. 不能使用'', 否则如果输入的全是非法字符依旧没有变化
  const filtered = val.replace(/[^a-zA-Z]/g, '')
  this.$nextTick(() => {
    this.A = filtered;
  });

}

具体可参考官网. 查了好久资料, 简单来说就是一个陈年巨坑,

组件属性设置不生效解决办法

当重复设置某些属性为相同的值时，不会同步到view层。例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。

解决办法有两种（以scroll-view组件为例）：

监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值

复制代码

	<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

export default {
    data() {
        return {
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
        }
    },
    methods: {
        scroll: function(e) {
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
                this.scrollTop = 0
            });
        }
    }
}

监听scroll事件，获取组件内部变化的值，实时更新其绑定值

复制代码

	<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

	export default {
		data() {
			return {
				scrollTop: 0,
			}
		},
		methods: {
			scroll: function(e) {
				// 如果使用此方法，请自行增加防抖处理
				this.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = 0
			}
		}
	}

第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。