一、案例效果
二、场景应用
输入框/文本框新增改变时的触发器,支持我们完成更多定制化的输入限制,例如:限制输入框的输入字数,限制输入的内容只能是文字或只能是数值。
三、功能设置
接下来,我们先一起学习下,如何限制输入字数并限制输入内容为数字。
1.添加两个参数变量组件,分别记录数字类型和文字长度
2.通过添加输入框,来获取用户输入的内容
3.输入内容不符合预设条件时,我们需要一个文本来提示我们重新输入,将其设置为初始隐藏,并且在输入框点击时添加一个触发来隐藏提示文本。
4.接下来,我们添加一个条件判断,当@参数变量1@==1时(即判断输入内容为非正整数和0时),设置显示元素 - 段落1,提示我们输入格式有误;同样当@参数变量2@!=5时(即输入内容字数不为5时),也出现错误提示文本。
5.最后,设置一下输入框改变时的触发。添加两个设置参数值,分别为参数变量1=(!(/(^\d+$)/.test(@输入框@))) 、参数变量2=(@输入框@+'').length ; 再添加步骤4中我们设定的条件判断即可。
6.设置完成,我们得到一个仅限制输入5位纯数字的输入框。
你还有哪些实现效果呢,快来一起解锁吧!