Axure文字输入超出限制输入

0 2022-01-07 10:11 内容校对:海绵宝宝手里的锅铲
收藏(0) 共有 258 人学习了本教程

《Axure文字输入超出限制输入》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强交互产品,函数,原型,文本框等多维度案例或实操来进行更多的学习;此教程是由刘小贺在2022-01-07发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。

通过axure的文本框和函数的功能,实现一个高保真的交互原型,做出文字输入超出限制的效果。具体操作流程一起来跟北极熊素材库的小编来看一看吧。

一、目标

通过axure的文本框和函数的功能,实现一个高保真的交互原型,做出文字输入超出限制的效果。

二、技能要求

要求看本教程的同学,需要对函数有所了解的功能又一个基本的掌握。如果不熟悉的话,也可以通过本文来学习使用函数。函数也不是什么魔鬼,其实他们很乖。

三、目的

学以致用,希望天下没有让人迷茫的教程。

四、背景

最近时间比较充裕,我就把原型都做成交互高保真的了,遇到一些没做过的我就搜教程看,但是很多教程都写的很简要,对学习的人要求比较高,不适合小白,我也常年因为类似的教程走过不少弯路,踩过不少坑。这次也是踩了坑,所以写个小白教程,以资激励自己输出。

本落要改变世界!哼哼~

五、教程

原型地址及教程

步骤  1

元件库拖一个文本域元件到画布上,就是输入段落那个元件(汉化后翻译是文本域,比较专业,可能正常人回不太能理解。但是翻译是死的,人是活的是不是)。然后单击元件,在右侧样式下面给这个元件命名一下,我命名的叫“输入框”,大家看心情吧,反正不协作的话怎么命名没人管得着你。接下来,双击输入框,输入提示文字,文字样式调整一下,颜色设置成999999。

Axure文字输入超出限制输入

步骤  2

现在,拖一个矩形元件,放到输入框的左下角。把矩形狂的边框线宽度设置为0,背景也设置为空白就行。然后按照步骤1的方法给矩形命名,我管他叫计数,因为这个矩形起到了显示输入框最大输入限制和统计当前输入的字数的作用。

Axure文字输入超出限制输入

步骤  3

接下来,双击输入框,给输入框添加事件。一共添加两个事件。事件1是文本改变时框输入时限制文本框的输入为500字,并统计当前输入的文字个数。事件2是获取文本框焦点时,清空当前的提示文字。由于当前文本框没有提示语的属性,因此只能用这种方式做成输入时清空提示语的交互。

Axure文字输入超出限制输入

事件1文本框文字改变时,设置两个操作。用到两个函数(点击函数可以查看用法):length和substring

事件1设置:选中文本框,点击新建交互,然后选择文本改变时,选择元件计数,然后选择设置文本,点击值的右侧fx,设置函数。

Axure文字输入超出限制输入

 Axure文字输入超出限制输入

然后按照图示为当前的元件也就是文本框,添加一个局部变量。

添加完成后,点击添加函数或变量,选择刚才添加的局部变量,然后再选择字符串函数length。

Axure文字输入超出限制输入

 

Axure文字输入超出限制输入

 

Axure文字输入超出限制输入

然后,选择完函数后,在函数后面加上/500。下图是设置完成后的样子。这个函数设置的,就是下方右侧图示展示的内容。这个函数设置的含义是,获取当前的元件,也就是输入框文本的字符长度,也就是获取你在输入框里输入了多少个字。然后/500是限制输入长度是500字的意思。所以结合下来就是下方右侧图示的文字输入字数限制提示的样式。

Axure文字输入超出限制输入

Axure文字输入超出限制输入

现在能获取你当前输入的字数了,也显示了当前可输入的字数是500字。接下来,就要设置如何限制你的输入不超过500字了。还说选择输入框,然后添加动作,选择设置文本,然后元件,选择输入框。上一次选择的是计数,这一次选择输入框。上一次是因为要设置显示当前输入字数和最大输入字数,这一次设置是要限制你在文本框里输入的字符数,所以要选择文本框,千万不要搞错!!!

Axure文字输入超出限制输入

跟之前一样,设置函数,点击fx去设置函数。然后与下方中间的图所示一样,先添加局部变量。然后选择插入函数或变量,添加刚才添加的局部变量,上面有教怎么添加,不在赘述了。这次添加完局部变量后,再添加一个字符串函数:substring。见下方最右边的图。是substring不是substr,别搞错了。我看的教程就用的substr,结果有bug,没法输入文字,会自动清空输入框。。。后来我去找的函数,换成了substring就好了。教程诚是坑我,所以我才写教程。。。废话少说,添加完函数后。如图,把函数里()里的from和to改成你要截取的字符串的范围。我改成了(0,500),意思是,不管文本框里输入多少字,我只显示从第一个到第500个字。从而达到限制输入的效果。到此,字数限制的交互就结束了

Axure文字输入超出限制输入

 

Axure文字输入超出限制输入

 

Axure文字输入超出限制输入

然后刚才不是有个事件2吗,事件2是一个获取焦点时的事件。获取焦点时,设置文本框的文本,这个文本设置上面都有教,大家复习一下。然后值呢,空着就行。原本咱们文本是写了提示文案吗,你再浏览器单击时获取了焦点,就会执行这个获取焦点时的事件,然后把文本设置为空,就达到了咱们的交互目的。

以上就是Axure文字输入超出限制输入的全部内容介绍了,关于更多axure的教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由刘小贺原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员