Axure 实例 - 输入框字数限制

今天抽空研究了 Axure 中有关变量和函数的使用方法,顺手拿最常见的[输入框字数限制]的效果做了个实例。

预览 | 下载

要求:
1、字数上限为 100 个字符。[不讨论英文和中文的字符占位问题,Axuer 中默认把一个汉字和一个字母都视为一个字符。]
2、内容为空时,将[发布]按钮至为不可用状态。
3、有内容输入时,将[发布]按钮至为可用状态,并即时提示剩余还可输入的字数。
4、字数超限后自动截断后续的输入内容。

首先对需要的控件进行 Lable 命名:
[输入框]:textarea-1
[发布按钮]:button-1
[字数提示]:word-1

然后为 textarea-1 添加 5 个 OnKeyUp 事件:
Case 1:将 textarea-1 的 length of weiget value 值[即字符长度]赋给变量 OnLoadVariable,为后面对于剩余字数的计算做准备。[OnLoadVariable 是 Axure 中自带的一个变量,可以直接拿来用,当然也可以新建一个变量。]

Case 2:当 textarea-1 的 length of weiget value 值 >0 and <100 时,使用 [[100 – OnLoadVariable]] 的公式值来替换 word-1 的值,实现即时显示剩余字数的效果,并将 button-1 状态至为 enable。

Case 3:因为对[可输入 0 字]的文字做了变色处理,所以要对 textarea-1 的 length of weiget value 值 =100 的条件和 word-1 的值做单独设置。

Case 4:因为 Axure 中并没有对输入框禁止输入的事件,所以这里需要采用变相的方法来实现字数超限时自动截断后续输入内容的效果。我想到的方法是,当 textarea-1 的 length of weiget value 值 >100 时,将当前 text on focused weiget[即已输入的内容]赋值给变量 NewVariable,同时利用函数 [[NewVariable.substring(0, 100)]] 来对变量 NewVariable 中前 100 个字符进行截取,并用来替换 textarea-1 的 text on focused weiget,形成一个[死]循环,这样在输入框中看见的就永远只是当前的 100 个字了。

Case 5:当 textarea-1 的 text on focused weiget 为空值时,将 button-1 状态至为 disable 。

这里同样要对非连贯性的条件通过右键菜单中的 Toggle IF/ELSE IF 将每个事件变更为 if xxx,而不是默认的 else if xxx 。

如果不想在字数超限后采用自动截断后续输入的做法,比如说类似新浪微博那种提示超限字数的做法,只要将上述的 Case 4 做个改动,即当 textarea-1 的 length of weiget value 值 >100 时,改用 [[OnLoadVariable-100]] 的公式值来替换 word-1 的值,就可以实现即时显示超出字数的效果,不过记得要将文案改成[已超 xx 字]。实例效果也在同一个页面中做了展现,需要注意的是同一个页面中变量不要重名。

虽然说通过变量和函数可以实现更加复杂的交互效果,但其实在工作中如果没有特殊需要,对于交互原型我个人不建议做到非常极致的效果,即所谓的高保真。因为这样不仅耗费时间,而且不利于后期修改。在实际应用中只要能够把页面的整体布局画出来,并把相应交互事件的注释写清楚就可以了,简单的效果可以单独新建一个页面来做,甚至完全不做也没关系。

  • leo

    下载页打不开啊

    • http://24says.com 24Says

      Dropbox 被墙了,需要的话留下邮箱我发给你。

  • timmy

    新手请教,请问case4能不能说详细点,NewVariable.substring(0, 100)函数在乎哪里找

    • http://24says.com/ 24Says

      我给 case4 多配了图,见图就好理解了。就是这个函数 [[LVAR.substring(from, to)]],LVAR 是自定义的变量名,from 是字符起始位置,to 是字符终点位。