axure文本框值相加_Axure教程：计数文本域实现

原标题：Axure教程：计数文本域实现

制定UI规范时，遇到实现“限制字数的文本域”的交互问题，即当用户输入的字数长度超过限制要求，如何只保留规定长度的文本？

效果如下：

我们知道【Number】类型的文本框，可以限制输入文本的最大长度，通常用在11位电话号码的情形较多，如下：

可惜，多行文本框并没有类型的区别，没有最大长度的限制。最后，只能联想到使用：

函数[[LVAR1.length]]：获得元件字符串的长度(即1234.length=4)；以及函数[[LVAR1.substring(from,to)]]：截取第from位到to位的字符串；

(即[[12345.substring(1,4)]]=234，也就是说截取第一位到第四位的数字但不包括第一位。)来实现上述的效果。

一、页面布局

为了使文本框的交互体验更好，本案例中，加入了一个矩形背景框，作为文本框的边框。主要是实现，鼠标点击文本框获得焦点时，边框线高亮的交互效果。因此，需要将文本框本身的边框线隐藏掉。

排版如下：

二、交互效果

(1)实现鼠标点击文本框时，边框线高亮效果

首先选中“文本框”：

1)添加获得焦点事件

属性 – 双击“获得焦点时”交互事件，元件 – 设置选中 – 勾选“背景框”，状态值为ture。

2)添加失去焦点事件

属性 – 双击“失去焦点时”交互事件，元件 – 设置选中 – 勾选“背景框”，状态值为false。

其次选中“背景框”：

设置选中样式：

属性 – 交互样式设置 – 选中，将边框线颜色设为主题色#0066ff；

(2)实现文本框的字数统计展示效果

主要用到函数：[[LVAR1.length]]

选中“文本框”：(此案例限制字数为 60)

1)添加“文本改变时”事件

属性- 双击“文本改变时”交互事件，元件 – 设置文本，勾选“计数”，文本值为 [[LVAR1.length]]/60，其中[[LVAR1.length]]为文本框的字数。

(3)实现字数超过限制时，只保留规定长度内文本的交互效果

主要用到函数：[[LVAR1.substring(from,to)]]。

只需要在上面的“文本改变时”事件中，选择左侧的元件 – 设置文本，勾选“文本域”，文本值为[[LVAR1.substr(0,60)]]，其中，LVAR1为文本域的文本，即截取文本域前60个字符。

三、预览效果

学习更多教程，可关注本人公众号：艾斯的Axure峡谷。欢迎大家留言评论，也可以留下你期待看到的交互效果。

示例演示：

作者：火星人～艾斯，公众号：艾斯的Axure峡谷

本文由 @火星人～艾斯原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议返回搜狐，查看更多

责任编辑：

axure文本框值相加_Axure教程：计数文本域实现相关推荐

axure文本框提示文字_Axure教程：一个中继器实现密码验证
本文给大家介绍用一个中继器实现axure登录时账号密码验证效果,一起来看看~ 实现效果如下图: 工具/原料: 账号文本框密码文本框登录按钮中继器记录密码的文本标签(隐藏) 提示框(隐藏) 验证 ...
js文本框设置必填项_Jquery文本框小例（必填框）
//当光标离开文本框的时候如果文本框为空,则将文本框边框色设置为红色,如果不为空则为白色.提示:焦点进入控件的事件是focus或者mousedown,焦点离开控件的事件是blur. $(functio ...
java计算两个文本框的值,java 文本框自动获取另外两个文本框的值的乘积
java 文本框自动获取另外两个文本框的值的乘积关注:282 答案:2 手机版解决时间 2021-02-25 21:59 提问者壹玍徴戰何亽陪 2021-02-25 13:53 在panel里 ...
如何使用jQuery获取文本框值
要获取文本框值,可以使用jQuery val()函数. 例如, $('input:textbox').val()-获取文本框值. $('input:textbox').val("新短信&qu ...
html 获取文本框值,html - 如何在JavaScript中获取文本框值
html - 如何在JavaScript中获取文本框值我正在尝试使用JavaScript从HTML文本框中获取值,但值不是在空格之后例如: 我只得到:上面的"软件". 我正在使 ...
html文本框光标位置,html的文本框显示光标如何在htmlText文本框光标处插入字符...
HTML 如何设置文本框中光标位置和光标居中我写样式,把文本框的宽度加大了.但是光标位置在上面. html怎么让文本框的光标出现在内容最后 HTML如何在打开页面时将光标定位在某个文本框 HTML5 ...
php文本框长度限制,php截取富文本框中的固定长度的字符
ai,哎怎么赶脚自己写东西越来越小儿科了呢,现在连这个问题都找了好半天因为后台是的内容是富文本编辑器编辑的,前台我傻逼的直接截取了字符串,然后样式啥的都乱了,找了半天是因为富文本的问题其实解决办法 ...
python tkinter 文本框全选_Python Tkinter Entry(文本框)
Python学习记录--关于Tkinter Entry(文本框)的选项.方法说明,以及一些示例. 属性(Options) background(bg) Type: color 说明:文本框的背景颜色 ...
编写一程序，有2个文本框，在第一个文本框中输入一个整数，当焦点从第一个文本框离开时，第二个文本框将显示这个数的绝对值（使用FocusListener）。
编写一程序,有2个文本框,在第一个文本框中输入一个整数,当焦点从第一个文本框离开时,第二个文本框将显示这个数的绝对值(使用FocusListener). import javax.swing.*; i ...

axure文本框值相加_Axure教程：计数文本域实现

axure文本框值相加_Axure教程：计数文本域实现相关推荐

最新文章

热门文章