以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

文字區塊(textarea)的自動增大術(auto-grow)

10/9 12' icon

Photo by Impressive Webs

新一代的瀏覽器,對文字區塊(textara)有新的設計,最重要的是在文字區塊右下角,多了一個可以調整的圖示,使用者可以在編寫內容時,依自己需求調整大小,印象中最早是在 Netscape 9 中出現,看起來像是(IE 未提供類似功能,以圖片顯示)

textarea

取消自訂大小控制

但事情通常是樂了使用者,就苦了設計者,大多設計者不希望這個元件沒事被調大調小,因為很容易破壞了整體畫面編排。幸好,有個簡單指令可以消除/取消使用者自己調整文字區塊大小,使用 CSS 來設定,如下

textarea {resize:none;}

結果就像這樣

至於在 IE 中那個惱人的捲軸,則加上 overflow:auto 來取消即可

建立自動擴展

一旦取消了調整功能,當使用者輸入的 文字數量超過 textarea 可以承受的程度時,捲軸就自動出現,而捲軸這東西,相信是許多人都很不樂意見到的,於是,有了文字區塊可以隨內容自動擴展高度的需求,用起來如下

 

function autogrow(textarea){
var adjustedHeight=textarea.clientHeight;

	adjustedHeight=Math.max(textarea.scrollHeight,adjustedHeight);
	if (adjustedHeight>textarea.clientHeight){
		textarea.style.height=adjustedHeight+'px';
	}

}

至於在 textarea 元件中加入 onkeyup="autogrow(this);" 即可

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: