问题:
很多时候我们都会想直接在input输入框中过滤掉不想要的输入,比如说限制输入框只能输入英文,那么当输入数字的时候,input的内容也不会读入数字。

然而这个在普通的html中的做法就是监听input事件然后控制修改绑定值就行;而uniapp就是一个奇葩,他的输入框的内容就好像是单独的一个模块,并不严格绑定value,即输入框的内容可能与绑定的value不一致。

解决方案:
由官网得知:input 事件处理函数可以直接 return 一个字符串,将替换输入框的内容,仅微信小程序支持
因而可以通过这种方案来反向控制input输入框的值。

<input
	:value="value"
	type="text"
	@input="handleInput"
/>
handleInput({ detail }) {
	if (!/^[a-zA-Z]$/.test(detail.value)) {
		return this.value;
	}
	this.value = detail.value;
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐