« Yin and Yang:動作改善(?)他 | トップページ | 『無断リンクはやめて』という人にはしない方向で »

2008/05/21

ちょっと小細工:textareaの高さを自動調節

改行入力なしでオートラップされた場合も自動調節してくれるとうれしいかな?と思ってちょっと小細工してみました。
■元ネタ
元記事:textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記)
経由:404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
■ソース
<script type="text/javascript">
function    initResizeTextarea(textarea) {
    if (!textarea||textarea._initResizeTextarea_) return;
    textarea._initResizeTextarea_=true;
    var offset=textarea.scrollHeight-textarea.offsetHeight;
    var lastLength=textarea.value.length, initRows=textarea.getAttribute('rows');
    if (isNaN(initRows)) initRows=3;
    if (!window.opera) {
        textarea.onkeyup=function(){
            var rows=textarea.getAttribute('rows');
            if (textarea.value.length<lastLength) {
                while (textarea.scrollHeight-textarea.offsetHeight<=offset) {
                    textarea.setAttribute('rows',--rows);
                    if (rows<=initRows) break;
                }
            }
            while (offset<textarea.scrollHeight-textarea.offsetHeight) {
                textarea.setAttribute('rows',++rows);
            }
            lastLength=textarea.value.length;
        };
    }
    else {
        textarea.onkeyup=function(){
            var lines=textarea.value.split('\n');
            var len=(initRows<lines.length)?lines.length:initRows;
            textarea.setAttribute('rows',len);
        };
    }
}   //  end of initResizeTextarea()
</script>

<textarea cols="64" rows="4" onfocus="initResizeTextarea(this)">
イチ


</textarea>
■サンプル
動作確認は、IE7(Sleipnir)、Firefox 2.0.0.14、Safari 3.1.1、Opera 9.27 で行いました。
ただし、Opera はscrollHeightの値が変化してくれないため、手動で入力した改行のみ対応で、オートラップには対応できていません。
どうも、Operaのtextareaは鬼門らしい(「内容に合わせて伸縮するテキストエリア」を Opera にも - m2より)

« Yin and Yang:動作改善(?)他 | トップページ | 『無断リンクはやめて』という人にはしない方向で »

パソコン・インターネット」カテゴリの記事

おもいつき」カテゴリの記事

覚書」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: ちょっと小細工:textareaの高さを自動調節:

« Yin and Yang:動作改善(?)他 | トップページ | 『無断リンクはやめて』という人にはしない方向で »

戻るリンク追加

カレンダー

2020年3月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ