制定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協議