Web制作

javascriptで文字量に応じてtextareaの高さを自動リサイズ

formのtextareaを文字量に応じて高さを自動リサイズしてくれるjavascriptを発見しました。
初期表示をクールにしたいとかいう場合にいいかもしれません。
スペースとりたくないからって理由だと、文字入力していくだび縦に伸びて、結局スペースとりますから微妙です。

参考サイト
textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ


参考サイトでは、内部にjavascript書いてましたが、やっぱ外部JSにします。

function textareaResize(event) {
    try {
        elem_id = event.srcElement.id;
    } catch ( e ) {
        elem_id = event.target.id;
    }
    var keycode = event.keyCode;
    if (keycode == 13) {
        var m = document.getElementById(elem_id);
        var r = m.getAttribute("rows");
        m.setAttribute("rows", parseInt(r)+1);
    }
}

コレ↑を何でもいいんですが、textarearesize.jsという名前でjsフォルダに保存します。
そして、<head>内で読み込みます。

<script type="text/javascript" src="js/textarearesize.js"></script>

そして<textarea>にonkeydown=”textareaResize(event)”と追加します。

<textarea rows="2" cols="50" onkeydown="textareaResize(event)"></textarea>

※rows=”1″でもいいんですが、なんか狭いので2行にしてます。
何行でもいいですが、自動リサイズの利点的に1,2行がよろしいかと。
これで文字を入力していくごとにテキストエリアの高さが自動リサイズされていきます。

やる人はいないと思いますが、何行か文字を入力した段階でページを更新すると高さが元に戻りますのでご注意ください。

More from my site

RECOMMENDこちらの記事も人気です。