支付宝小程序input 动态改内容不生效问题

最新推荐文章于 2024-01-10 11:16:13 发布

JenneyJ

最新推荐文章于 2024-01-10 11:16:13 发布

阅读量1.6k

点赞数

分类专栏：支付宝小程序小程序

本文链接：https://blog.csdn.net/dandan1924/article/details/102783330

版权

小程序同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

支付宝小程序

2 篇文章 0 订阅

订阅专栏

本文详细解析了支付宝小程序中input控件的受控状态实现方式，通过使用controlled属性，确保输入框的值能够被外部JS逻辑精确控制。文章提供了具体的代码示例，包括axml和js部分，并指出了不使用controlled属性时可能遇到的问题。

摘要由CSDN通过智能技术生成

代码：

axml代码如下

<input type="text" onInput='bindInput' name="firstname" value="{{firstname}}" maxlength='16' placeholder-style='color:#c5c5c5' placeholder='如：SAN'></input>

js代码如下

bindInput: function (e) {
	info= e.detail.value.trim().replace(/[^a-zA-Z]/g, "").toUpperCase();
	this.setData({ firstname:info });
    },

运行结果：

不生效，input的值不受控制，后台在官方文档找到controlled这个属性，记录一下

<input controlled="true" type="text" onInput='bindInput' name="firstname" value="{{firstname}}" maxlength='16' placeholder-style='color:#c5c5c5' placeholder='如：SAN'></input>