用axure做出交互高保真原型之：文字输入超出限制输入的交互效果

事件1文本框文字改变时，设置两个操作。用到两个函数（点击函数可以查看用法）：length和substring

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

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

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

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

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

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

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

本次教程到此结束！

这次写教程花了1个小时呢~

可谓用心良苦。