入力に応じて高さの変わるテキストエリア

アルファブロガー、此処では自身をJavaScripterとクレジットの小飼弾氏のブログ 404 Blog Not Found の2008年5月20日の記事 javascript - 勝手に添削 - textareaの高さを自動調節 で紹介されていたのが イラストdeブログ開発記textareaのサイズを入力にあわせて調整するJavaScript にて、当記事ではタイトル通りフォームに於けるテキストエリアの高さが改行や削除に合わせて変化する javascriptを開発公開し、興を惹かれた小飼弾氏が更に使い勝手を良くするべく提案された経緯である様で、 また被紹介記事では早速小飼弾氏の提案を受け入れられた旨、記されています。
小飼弾氏は
Firefox 2, Safari 3, Opera 9で動作確認してあります。
とのみ記されてIEの眼中に無いのは流石ですが一般用にIE7でも問題はない様です。

ブログの投稿編集画面はテキストエリアで構成されていますが、 改行が重なるとスクロールバーの操作が編集画面に加わり煩わしく感じることも多いですから、 様々なブログシステムで上手くアレンジして採用されることが望まれる機能の様に感じます。

百聞は一見に如かず、 [続きを読む]をクリックすると当該テキストエリアが見られる様にしておきました。
初期値は「いろはにほへとちりぬるを」となっていますので、 此れを削除したり、文章追加、改行をすると効果をご覧いただけます。
スポンサーリンク


小飼弾氏による改善提案スクリプトを利用しています。
<SCRIPT>
<!--
function resize_textarea(ev){
    //if (ev.keyCode != 13) return;
    var textarea = ev.target || ev.srcElement;
    var value = textarea.value;
    var lines = 1;
    for (var i = 0, l = value.length; i < l; i++){
        if (value.charAt(i) == 'n') lines++;
     }
     textarea.setAttribute("rows", lines);
     // window.status = lines;
}
// -->
</SCRIPT>
<textarea cols="45" rows="3" onkeyup="resize_textarea(event)">いろは
にほへと
ちりぬるを</textarea>
スポンサーリンク