以下為本站文章分類清單

  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);" 即可

 

以下為文章回應區

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

foot pain map   2017/7/3 下午 11:58:00

My brother recommended I may like this website. He was totally right.
This publish actually made my day. You cann't consider just how a lot time I had spent for this information! Thank you!

foot pain from standing   2017/7/3 上午 09:48:00

These are actually wonderful ideas in regarding
blogging. You have touched some nice things here. Any
way keep up wrinting.

judiproud.jimdo.com   2017/6/16 下午 11:58:00

Everything said made a great deal of sense. However, think
about this, what if you were to create a killer headline?
I mean, I don't wish to tell you how to run your website, but suppose you added a title to maybe grab a
person's attention? I mean 【卜維丰】文字區塊(textarea)的自動增大術(auto-grow) is kinda plain. You ought to glance at Yahoo's front page and note how
they create post headlines to grab viewers to open the links.
You might try adding a video or a related picture or two
to grab readers interested about everything've written. In my opinion, it
might make your posts a little bit more interesting.

dennaroshannon.weebly.com   2017/6/12 下午 02:39:00

Superb post however , I was wanting to know if you could write a litte more on this
topic? I'd be very thankful if you could elaborate a little bit more.
Kudos!

manicure   2017/4/11 下午 06:24:00

Spot on with this write-up, I really feel this amazing site needs a lot more attention. I'll probably be back again to read through more,
thanks for the info!

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