Axure怎么做出文字输入超出限制输入的交互效果?
发布网友
发布时间：2023-08-19 22:30
共1个回答
热心网友
时间：2024-10-08 22:12
利用axure的文本字段和函数，可以实现高保真的交互原型，使文本输入的效果超出*。这到底怎么做呢？可能不少小伙伴都在犯难！因此，接下来将为大家解密制作方法，感兴趣跟着往下看！~另，Axure产品需求原型图不会画？来，专业讲师教你0基础学习Axure，快速从产品小白到原型大神~提供7套（不断更新）Axure原型交互自学视频课，无论新老手都可以综合学习掌握~
用axure做出文字输入超出*输入的交互效果教程：
步骤1
从元件库拖一个文本域元件到画布上，就是输入段落那个元件（汉化后翻译是文本域，比较专业，可能正常人回不太能理解。但是翻译是死的，人是活的是不是）。然后单击元件，在右侧样式下面给这个元件命名一下，我命名的叫“输入框”，大家看心情吧，反正不协作的话怎么命名没人管得着你。接下来，双击输入框，输入提示文字，文字样式调整一下，颜色设置成999999。
步骤2
现在，拖一个矩形元件，放到输入框的左下角。把矩形狂的边框线宽度设置为0，背景也设置为空白就行。然后按照步骤1的方法给矩形命名，我管他叫计数，因为这个矩形起到了显示输入框最大输入*和统计当前输入的字数的作用。
步骤3
接下来，双击输入框，给输入框添加事件。一共添加两个事件。事件1是文本改变时框输入时*文本框的输入为500字，并统计当前输入的文字个数。事件2是获取文本框焦点时，清空当前的提示文字。由于当前文本框没有提示语的属性，因此只能用这种方式做成输入时清空提示语的交互。
事件1文本框文字改变时，设置两个操作。用到两个函数（点击函数可以查看用法）：length和substring
事件1设置：选中文本框，点击新建交互，然后选择文本改变时，选择元件计数，然后选择设置文本，点击值的右侧fx，设置函数。
然后按照图示为当前的元件也就是文本框，添加一个局部变量。
添加完成后，点击添加函数或变量，选择刚才添加的局部变量，然后再选择字符串函数length。
然后，选择完函数后，在函数后面加上/500。下图是设置完成后的样子。这个函数设置的，就是下方右侧图示展示的内容。这个函数设置的含义是，获取当前的元件，也就是输入框文本的字符长度，也就是获取你在输入框里输入了多少个字。然后/500是*输入长度是500字的意思。所以结合下来就是下方右侧图示的文字输入字数*提示的样式。
现在能获取你当前输入的字数了，也显示了当前可输入的字数是500字。接下来，就要设置如何*你的输入不超过500字了。还说选择输入框，然后添加动作，选择设置文本，然后元件，选择输入框。上一次选择的是计数，这一次选择输入框。上一次是因为要设置显示当前输入字数和最大输入字数，这一次设置是要*你在文本框里输入的字符数，所以要选择文本框，千万不要搞错！！！
跟之前一样，设置函数，点击fx去设置函数。然后与下方中间的图所示一样，先添加局部变量。然后选择插入函数或变量，添加刚才添加的局部变量，上面有教怎么添加，不在赘述了。这次添加完局部变量后，再添加一个字符串函数：substring。见下方最右边的图。是substring不是substr，别搞错了。我看的教程就用的substr，结果有bug，没法输入文字，会自动清空输入框。。。后来我去找的函数，换成了substring就好了。教程诚是坑我，所以我才写教程。。。废话少说，添加完函数后。如图，把函数里（）里的from和to改成你要截取的字符串的范围。我改成了（0，500），意思是，不管文本框里输入多少字，我只显示从第一个到第500个字。从而达到*输入的效果。到此，字数*的交互就结束了
以上就是羽兔为大家分享的“Axure怎么做出文字输入超出*输入的交互效果？”相关内容了，怎么样？是否对你的Axure原型图绘制有所帮助！学Axure，单一知识恐难全面产品原型交互，不如更多Axure文章展开学习~Axure是一款非常非常简单的软件。如果你不需要交互，你可以在没有教程的情况下在10分钟内搞定它！但是要是你想利用Axure很好的制作交互原型，成为产品经理，那么深入的学习就很有必要了！就可以进行基础到深层次的学习，感兴趣的就去试学体验~
