制定UI規(guī)范時，遇到實現(xiàn)“限制字數(shù)的文本域”的交互問題，即當用戶輸入的字數(shù)長度超過限制要求，如何只保留規(guī)定長度的文本？

效果如下：

我們知道【Number】類型的文本框，可以限制輸入文本的最大長度，通常用在11位電話號碼的情形較多，如下：

可惜，多行文本框并沒有類型的區(qū)別，沒有最大長度的限制。最后，只能聯(lián)想到使用：

函數(shù)[[LVAR1.length]]：獲得元件字符串的長度（即1234.length=4）；以及函數(shù)[[LVAR1.substring(from,to)]]：截取第from位到to位的字符串；

（即[[12345.substring(1,4)]]=234，也就是說截取第一位到第四位的數(shù)字但不包括第一位。）來實現(xiàn)上述的效果。

一、頁面布局

為了使文本框的交互體驗更好，本案例中，加入了一個矩形背景框，作為文本框的邊框。主要是實現(xiàn)，鼠標點擊文本框獲得焦點時，邊框線高亮的交互效果。因此，需要將文本框本身的邊框線隱藏掉。

排版如下：

二、交互效果

（1）實現(xiàn)鼠標點擊文本框時，邊框線高亮效果

首先選中“文本框”：

1）添加獲得焦點事件

屬性 – 雙擊“獲得焦點時”交互事件，元件 – 設(shè)置選中 – 勾選“背景框”，狀態(tài)值為ture。

2）添加失去焦點事件

屬性 – 雙擊“失去焦點時”交互事件，元件 – 設(shè)置選中 – 勾選“背景框”，狀態(tài)值為false。

其次選中“背景框”：

設(shè)置選中樣式：

屬性 – 交互樣式設(shè)置 – 選中，將邊框線顏色設(shè)為主題色#0066ff；

（2）實現(xiàn)文本框的字數(shù)統(tǒng)計展示效果

主要用到函數(shù)：[[LVAR1.length]]

選中“文本框”：（此案例限制字數(shù)為 60）

1）添加“文本改變時”事件

屬性- 雙擊“文本改變時”交互事件，元件 – 設(shè)置文本，勾選“計數(shù)”，文本值為?[[LVAR1.length]]/60，其中[[LVAR1.length]]為文本框的字數(shù)。

（3）實現(xiàn)字數(shù)超過限制時，只保留規(guī)定長度內(nèi)文本的交互效果

主要用到函數(shù)：[[LVAR1.substring(from,to)]]。

只需要在上面的“文本改變時”事件中，選擇左側(cè)的元件 – 設(shè)置文本，勾選“文本域”，文本值為[[LVAR1.substr(0,60)]]，其中，LVAR1為文本域的文本，即截取文本域前60個字符。

三、預(yù)覽效果

學(xué)習(xí)更多教程，可關(guān)注本人公眾號：艾斯的Axure峽谷。歡迎大家留言評論，也可以留下你期待看到的交互效果。

示例演示：

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議