textarea feature extend which make textarea stretchable with user typing

近期醉心於將既存的 HTML element 做些優化, 賦予它一些不同以往的行為, 藉此豐富其使用體驗以及增加其實用度

stretchIt 便是這個概念下所做的優化, stretchIt 擴充了既有的 textarea, 藉由簡易的開啟設置後, 便可以有著跟 facebook 輸入框相同的體驗, 也就是說 textarea 的高度將會隨著 user 輸入的內容而有所連動, 這樣不僅避免 inner scroll 造成的不便, 更可以讓 output 的內容與輸入趨於一致, 可以說達到雙贏的效果

以下範例便是 stretchIt 的務實應用, 我們可以試著在 textarea 上 key in 一些內容, 該 textarea 由於已經開啟 stretchIt 的功能, 所以它自身的高度便會隨著內容物有所變化, 由於該 textarea 寬度亦是相對於當前 viewport, 所以即使改變視窗寬度, stretchIt 亦會自動的調整好適合的高度, 可以說是方便非常

※ 歡迎點擊下方連結進行觀看 : – stretchIt: http://mei.homin.com.tw/stretchItPr…

使用方法:

使用方法可以說是簡單非常, 首先, 我們要先把相關的 JavaScript require 到頁面中

 <script async src="stretchIt.js"></script>

當該 js 被 require 進來之後, 便會直接對頁面上所有的 textarea 進行擴展(包含事後透過 JavaScript dynamic generate 出來的 textarea)

我們可以透過搜尋 textarea 特定的 property 來觀察 stretchIt 是否有正常被附加上去, 如果掃出來的結果為 undefined, 則表出了點小狀況

var target;
target = document.querySelector('textarea');
console.log(target.stretchIt);// true || false

接下來, 我們來看看要如何開啟或者關閉 stretchIt 的功能, 要開啟或者關閉 stretchIt 的功能有兩種方法, 分別是透過設定 data attribute 或者是修改 property

– 設定 data attribute 可以直接在 html code 上加上 data attribute

<textarea data-stretch-it></textarea>

亦可透過 JavaScript 動態來附加

var target;
target = document.querySelector('textarea');
// turn on stretchIttarget.setAttribute('data-stretch-it', 'true');
// turn off stretchIttarget.removeAttribute('data-stretch-it');

– 修改 property

var target;
target = document.querySelector('textarea');
// turn on stretchIttarget.stretchIt = true;
// turn off stretchIttarget.stretchIt = false;

只要使用上述的任一種方法, 即可輕輕鬆鬆完成 stretchIt 功能的開啟 || 關閉, 另外 stretchIt 亦提供一個 method – stretchItRefresh, 來強制重新繪製 textarea 當前的高度, 當頁面 style 有異動的時候, 造成 textarea 的 style 產生變化時, 便可以透過 call 這個 method 來強制重繪

var target;
target = document.querySelector('textarea');
//modify page styledocument.body.classList.add('modify');
//force textarea redrawtarget.stretchItRefresh();

以上便是 stretchIt 的使用以及所支援的功能, 筆者儘量將設置的門檻降至最低, 讓每個使用的 developer 都可以開開心心的來使用這個 feature, 如果在使用過程中遇到任何的困難或者發現任何問題的話, 請不吝與筆者進行分享與 feedback, 讓筆者將不足或者是缺失的地方補上, 發揮其更大功效, 謝謝

測試環境:

  • OS: Windows 7
  • Browser: Chrome Version 55.0.2883.87 m (64-bit) , Firefox 50.1.0, MSIE 11.0.9600.18426, mobile safari (iOS 10.2)

Reference:

轉載文章 – textarea feature extend which make textarea stretchable with user typing

mei

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *