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

步驟  1

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

步驟  2

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

步驟  3

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

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

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

 

然后按照?qǐng)D示為當(dāng)前的元件也就是文本框,添加一個(gè)局部變量。

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

  

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

現(xiàn)在能獲取你當(dāng)前輸入的字?jǐn)?shù)了,也顯示了當(dāng)前可輸入的字?jǐn)?shù)是500字。接下來(lái),就要設(shè)置如何限制你的輸入不超過(guò)500字了。還說(shuō)選擇輸入框,然后添加動(dòng)作,選擇設(shè)置文本,然后元件,選擇輸入框。上一次選擇的是計(jì)數(shù),這一次選擇輸入框。上一次是因?yàn)橐O(shè)置顯示當(dāng)前輸入字?jǐn)?shù)和最大輸入字?jǐn)?shù),這一次設(shè)置是要限制你在文本框里輸入的字符數(shù),所以要選擇文本框,千萬(wàn)不要搞錯(cuò)。!

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

  

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

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