課程目標

認識並且能使用 autosize 套件

課程內容

這次的套件是 https://github.com/jackmoore/autosize

文件與 demo 在 https://www.jacklmoore.com/autosize/

這是一個讓 <textarea> 的 UX(User Experience 使用者體驗)瞬間升級的好用套件

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

使用起來非常簡單,把 DOM 元素找到,當成參數傳給 autosize 函式,就可以了

在設計各種第三方套件給別人的時候,通常都會設計成這樣,很簡單、易用吧

程式的使用方法,我們叫 API(Application Programming Interface,應用程式介面)

實務上,我們會跟同事說:「去查一下這個套件的 API」,也就是去看一下這套件的使用方法。可以理解成「產品規格」


在上網搜尋套件的時候,第一個要先看這個專案的星星數量,至少要有幾百顆以上吧

如果是太冷門的套件,代表可能不夠成熟、文件不完整、潛在 bug 會很多

第二個要看的是最近更新日期,也就是 last commit 的時間,至少兩年內有更新過吧

太久沒更新的專案,可能有點過時,會跟最新的瀏覽器或者其他工具有衝突

不過,如果只是用在網站上的小小地方,真的出問題,再換掉的成本也不大,那就先導入也沒關係


要使用第三方套件,除了直接下載然後使用 <script> 引入之外,還有一個常用的懶人方法

就是搜尋 套件名稱 CDN,直接找現成的 CDN 連結來用

CDN 全名 Content Distribution Network,內容傳遞網路。這是大型企業讓資源在全球加速載入用的

看不懂沒關係,反正搜尋 套件名稱 CDN,通常會有現成 <script> 可用

搜尋 autosize cdn 看看搜尋結果,就會知道了

(要注意這是一個懶人方法,工作上直接這樣用,網站可能會載入的有點慢)

課後作業

請使用 https://jsfiddle.net

假設你正在開發一個留言功能

有暱稱欄位、留言欄位、以及一個送出按鈕

留言的區塊,textarea 預設只有三行的高度

使用者在輸入時,輸入越多行,輸入區塊會自動變高,而不會出現捲軸

做出以上功能,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 21 則留言

作業繳交 https://jsfiddle.net/bf5e4nys/60/

按讚的人:

交作業 https://jsfiddle.net/birdie2019/j69s8vdc/38/

按讚的人:

寫得很好,順利完成!

交作業 https://jsfiddle.net/evon0306/tj80s7em/

按讚的人:

寫得很好,順利完成!

作業 https://jsfiddle.net/superyngo/87g9kj3m/10/

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/johnny890118/y798mwjq/135/ 交作業

按讚的人:

寫得很好,順利完成!

交作業,再麻煩站長了,謝謝! https://all-suite.glitch.me

按讚的人:

https://jsfiddle.net/dfg312546/ovxkba4j/21/ 交

按讚的人:

https://jsfiddle.net/ZooeyLai/t1wvprj8/3/ 交作業~

按讚的人:

寫得很好,順利完成!

https://jsfiddle.net/wimp9487/75z3mLwx/1/ 交作業!

按讚的人:

寫得很好,順利完成!

作業繳交

https://jsfiddle.net/mb2902911/bw28paqm/2/

按讚的人:

寫得很好,順利完成!

交作業 https://codepen.io/adens123/pen/yLZOaKM

按讚的人:

交作業了 https://jsfiddle.net/7g2c0s8y/

按讚的人:

2024.02.12 https://jsfiddle.net/o1f5gjdn/

按讚的人: