以下為本站文章分類清單

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

 

以下為文章回應區

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

What do you do for Achilles tendonitis?   2017/8/21 下午 05:11:00

My spouse and I stumbled over here from a different page and thought I may as well check things out.
I like what I see so now i am following you. Look forward to looking over your web page repeatedly.

How did the Achilles tendon get it's name?   2017/8/4 下午 02:13:00

I was curious if you ever thought of changing the page layout of your blog?
Its very well written; I love what youve got to say. But maybe
you could a little more in the way of content so
people could connect with it better. Youve got an awful lot of text
for only having one or two images. Maybe you could space it out better?

What do you do for Achilles tendonitis?   2017/7/31 下午 12:24:00

hey there and thank you for your information – I have certainly picked
up something new from right here. I did however expertise several technical issues using this web site,
as I experienced to reload the website lots of times previous to I could get it to
load correctly. I had been wondering if your web hosting is OK?
Not that I am complaining, but slow loading instances times will very frequently affect your placement in google and could damage
your quality score if advertising and marketing with
Adwords. Well I am adding this RSS to my email and
can look out for a lot more of your respective interesting content.

Make sure you update this again very soon.

What do you do for Achilles tendonitis?   2017/7/28 上午 10:58:00

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my
blog that automatically tweet my newest twitter updates.
I've been looking for a plug-in like this for quite some time and was hoping maybe
you would have some experience with something like this.

Please let me know if you run into anything.
I truly enjoy reading your blog and I look forward to your new updates.

Can exercise increase your height?   2017/7/23 上午 10:25:00

Appreciate this post. Will try it out.

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!

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