文字輸入超出限制輸入的交互效果
發(fā)布時間:2022-03-12 09:53 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2003

步驟  1

從元件庫拖一個文本域元件到畫布上,就是輸入段落那個元件(漢化后翻譯是文本域,比較專業(yè),可能正常人回不太能理解。但是翻譯是死的,人是活的是不是)。然后單擊元件,在右側(cè)樣式下面給這個元件命名一下,我命名的叫“輸入框”,大家看心情吧,反正不協(xié)作的話怎么命名沒人管得著你。接下來,雙擊輸入框,輸入提示文字,文字樣式調(diào)整一下,顏色設置成999999。

步驟  2

現(xiàn)在,拖一個矩形元件,放到輸入框的左下角。把矩形狂的邊框線寬度設置為0,背景也設置為空白就行。然后按照步驟1的方法給矩形命名,我管他叫計數(shù),因為這個矩形起到了顯示輸入框最大輸入限制和統(tǒng)計當前輸入的字數(shù)的作用。

步驟  3

接下來,雙擊輸入框,給輸入框添加事件。一共添加兩個事件。事件1是文本改變時框輸入時限制文本框的輸入為500字,并統(tǒng)計當前輸入的文字個數(shù)。事件2是獲取文本框焦點時,清空當前的提示文字。由于當前文本框沒有提示語的屬性,因此只能用這種方式做成輸入時清空提示語的交互。

事件1文本框文字改變時,設置兩個操作。用到兩個函數(shù)(點擊函數(shù)可以查看用法):length和substring

事件1設置:選中文本框,點擊新建交互,然后選擇文本改變時,選擇元件計數(shù),然后選擇設置文本,點擊值的右側(cè)fx,設置函數(shù)。

 

然后按照圖示為當前的元件也就是文本框,添加一個局部變量。

添加完成后,點擊添加函數(shù)或變量,選擇剛才添加的局部變量,然后再選擇字符串函數(shù)length。

  

然后,選擇完函數(shù)后,在函數(shù)后面加上/500。下圖是設置完成后的樣子。這個函數(shù)設置的,就是下方右側(cè)圖示展示的內(nèi)容。這個函數(shù)設置的含義是,獲取當前的元件,也就是輸入框文本的字符長度,也就是獲取你在輸入框里輸入了多少個字。然后/500是限制輸入長度是500字的意思。所以結(jié)合下來就是下方右側(cè)圖示的文字輸入字數(shù)限制提示的樣式。

現(xiàn)在能獲取你當前輸入的字數(shù)了,也顯示了當前可輸入的字數(shù)是500字。接下來,就要設置如何限制你的輸入不超過500字了。還說選擇輸入框,然后添加動作,選擇設置文本,然后元件,選擇輸入框。上一次選擇的是計數(shù),這一次選擇輸入框。上一次是因為要設置顯示當前輸入字數(shù)和最大輸入字數(shù),這一次設置是要限制你在文本框里輸入的字符數(shù),所以要選擇文本框,千萬不要搞錯。!

跟之前一樣,設置函數(shù),點擊fx去設置函數(shù)。然后與下方中間的圖所示一樣,先添加局部變量。然后選擇插入函數(shù)或變量,添加剛才添加的局部變量,上面有教怎么添加,不在贅述了。這次添加完局部變量后,再添加一個字符串函數(shù):substring。見下方最右邊的圖。是substring不是substr,別搞錯了。我看的教程就用的substr,結(jié)果有bug,沒法輸入文字,會自動清空輸入框。。。后來我去找的函數(shù),換成了substring就好了。教程誠是坑我,所以我才寫教程。。。廢話少說,添加完函數(shù)后。如圖,把函數(shù)里()里的from和to改成你要截取的字符串的范圍。我改成了(0,500),意思是,不管文本框里輸入多少字,我只顯示從第一個到第500個字。從而達到限制輸入的效果。到此,字數(shù)限制的交互就結(jié)束了

  

然后剛才不是有個事件2嗎,事件2是一個獲取焦點時的事件。獲取焦點時,設置文本框的文本,這個文本設置上面都有教,大家復習一下。然后值呢,空著就行。原本咱們文本是寫了提示文案嗎,你再瀏覽器單擊時獲取了焦點,就會執(zhí)行這個獲取焦點時的事件,然后把文本設置為空,就達到了咱們的交互目的。

UI交互app及axure設計教程
我要自學網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內(nèi)設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設計 會計課程 興趣成長 AIGC