文章原始出處 http://audi.tw/Blog/Javascript/javascript.textarea.autogrow.asp

(我只是做copy記錄而已，我試了很多個，只有這個才同時適用於Firefox和IE，要給作者一個鼓勵)

 

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

textarea

取消自訂大小控制

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

textarea {resize:none;}

結果就像這樣

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

建立自動擴展

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

 

程式碼

<script type="text/javascript">

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

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

}
</script>
 

至於在 textarea 元件中加入 onkeyup="autogrow(this);" 即可。舉例如下：

<textarea name="message" cols="90" rows="12" onkeyup="autogrow(this);">
</textarea>

 

 

arrow
arrow
    全站熱搜

    Chung 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄