.

输入框文本框支持改变时触发器,现已上线!

小常发表于:2021年05月07日 18:57:05更新于:2021年05月08日 14:38:56

 


一、案例效果


0016095136bad43aea32e248e087ed7   00160951364b6567a87bf6a38e48aee

《【限制输入】信息提交》


二、场景应用

输入框/文本框新增改变时的触发器,支持我们完成更多定制化的输入限制,例如:限制输入框的输入字数,限制输入的内容只能是文字或只能是数值。


三、功能设置

接下来,我们先一起学习下,如何限制输入字数并限制输入内容为数字。

1.添加两个参数变量组件,分别记录数字类型和文字长度

00160951b663c07a32041b4983c3d1f

 

2.通过添加输入框,来获取用户输入的内容

00160951b77e8f0c3a3dc6439d55629

 

3.输入内容不符合预设条件时,我们需要一个文本来提示我们重新输入,将其设置为初始隐藏,并且在输入框点击时添加一个触发来隐藏提示文本。

00160951ba7b113ceb03de7ebf9673f

 

4.接下来,我们添加一个条件判断,当@参数变量1@==1时(即判断输入内容为非正整数和0时),设置显示元素 - 段落1,提示我们输入格式有误;同样当@参数变量2@!=5时(即输入内容字数不为5时),也出现错误提示文本。

image.png

 

5.最后,设置一下输入框改变时的触发。添加两个设置参数值,分别为参数变量1=(!(/(^\d+$)/.test(@输入框@))) 参数变量2=(@输入框@+'').length ; 再添加步骤4中我们设定的条件判断即可。

image.png

00160951be04393f574199c1c81bbac


6.设置完成,我们得到一个仅限制输入5位纯数字的输入框。

你还有哪些实现效果呢,快来一起解锁吧!