中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本期給大家?guī)?lái)的教程是“可自動(dòng)伸縮高度的textarea輸入框”。

一、照例先上gif

二、制作方法

1. 首選還是分解元素

整體上我們可以看到需要用到的元素塊為5個(gè)部分，分別是：

1. 多文本輸入框，主要用來(lái)輸入文本內(nèi)容的元素，清理邊框和背景色后給它命名為“輸入框”。
2. 背景塊，因?yàn)椤岸辔谋据斎肟颉北旧碛泻芏嘞拗?，用一個(gè)“矩形”來(lái)專(zhuān)門(mén)背景色比較好，命名為“背景”。
3. 輸入框內(nèi)字?jǐn)?shù)展示，用來(lái)確定已經(jīng)輸入了多少個(gè)字，以及為了增加超出字?jǐn)?shù)限制后，改變顏色的作用。設(shè)定選中后字體“變紅”的樣式后，命名為“輸入字?jǐn)?shù)”
4. 斜杠，裝飾用，沒(méi)有具體作用，
5. 限制字?jǐn)?shù)，裝飾用，沒(méi)有具體作用。

備： “輸入字?jǐn)?shù)”、“斜杠”和“限制字?jǐn)?shù)”，這三個(gè)打包成一個(gè)組，移動(dòng)起來(lái)方便，命名為“字?jǐn)?shù)限制”

2. 制作動(dòng)效

交互動(dòng)效設(shè)置在“多文本輸入框”上，因?yàn)槭窃阪I盤(pán)輸入的時(shí)候發(fā)生的變紅，所以事件我們選用“文本改變時(shí)”

（1）首先數(shù)量

確定輸入框一行可以輸入多少漢字，然后確定限制字?jǐn)?shù)，和可以伸縮的高度是多少。（我的設(shè)定輸入框一行可以輸入23個(gè)漢字，限制字?jǐn)?shù)為255個(gè)漢字，可以伸縮的高度是4行。）設(shè)置判斷

（2）設(shè)置判斷

如圖所示，為了滿足我的設(shè)定，我需要用到6個(gè)判斷。分別是：字?jǐn)?shù)小于18，字?jǐn)?shù)小于41，字?jǐn)?shù)小于63，字?jǐn)?shù)小于87，字?jǐn)?shù)小于256 和 字?jǐn)?shù)大于256。

為什么字?jǐn)?shù)小于是18而不是23，原因是我設(shè)計(jì)的“字?jǐn)?shù)限制”壓在了輸入框上，如果字?jǐn)?shù)是23的話，就會(huì)出現(xiàn)文字重疊的情況了。

（3）寫(xiě)交互

每次判斷生效后，都需要設(shè)置“輸入框”和背景的尺寸，移動(dòng)“字?jǐn)?shù)限制”，改變“輸入字?jǐn)?shù)”。

所以這里就不重復(fù)介紹了，具體的交互設(shè)置如圖：

本篇內(nèi)容到此結(jié)束，不知道小伙伴們有沒(méi)有更好的方式實(shí)現(xiàn)這個(gè)特效，在評(píng)論里留言吧！

本文原型鏈接：https://sj6jca.axshare.com

歡迎朋友們拍磚，多多指出其中的不足。

擴(kuò)展閱讀

Axure教程 | 仿做京東商城式的左側(cè)菜單欄

Axure教程 | 制作一個(gè)商品飛入購(gòu)物車(chē)的動(dòng)效

Axure教程 | 如何使用中繼器當(dāng)數(shù)據(jù)庫(kù)，制作web端幻燈片？

Axure教程 | web端的驗(yàn)證碼（普通驗(yàn)證碼和滑塊驗(yàn)證碼）如何制作？

Axure教程 | 小白入門(mén)，制作web端注冊(cè)/登錄

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。