2008年05月20日 14:15 [Edit]

javascript - 勝手に添削 - textareaの高さを自動調節

これはなかなかいいですね。

textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記)
イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました

Firefox 2, Safari 3, Opera 9で動作確認してあります。

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;
}

以下、変更点を。

  • try{}catch(e){}は、上のように書けば不要です。
  • 改行キー(keyCode == 13)を押した時だけではなく、常に\nの数を数えています。これでも十分な速度が出ますし、行数が減る場合にも対応しています。改行時にのみ作用させたい場合、最初のコメントをアンコメントしてください。
  • 最後のコメントアウトされた行はデバッグ用です。

Enjoy!

Dan the JavaScripter


この記事へのトラックバックURL

この記事へのトラックバック
404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節【】at 2012年01月20日 05:02
iPhoneのsafariはこれでもかってくらいよく落ちるんですが、その代わりにHTML5やCSS3なんかの一部が実装されています。まだまだIEが主流のPC向けサイトではHTML5を使うわけにはいきませんが、iPhone向けサイトではこれをを堂々と使うことができます。 まだ、全部把握し....
javascriptからiPhoneローカルにデータベースを作る【iPhone向けサイトのUIを考える会】at 2008年07月27日 00:56
textareaの...
coolで便利なJavaScriptとか【heeha.ws::blog】at 2008年06月03日 02:08
アルファブロガー、此処では自身をJavaScripterとクレジットの小飼弾氏のブログ404 Blog Not Foundの2008年5月20日の記事javascript - 勝手に添削 - textareaの高さを自動調節で紹介されていたのがイラストdeブログ開発記のtextareaのサイズを入力にあわせて調整するJava
入力に応じて高さの変わるテキストエリア【ホームページ作成浜松Tips】at 2008年05月26日 08:00
textareaのサイズを入力にあわせて調整するJavaScript のエントリ...
textareaサイズ調節を添削して頂きました【イラストdeブログ開発記】at 2008年05月22日 02:58
現代のJavaScriptにはperlのm//相当のString.match()も、s///相当のString.replace()も存在しますが、なぜかString.tr()がなかったので作りました。 /lang/javascript/String.tr/trunk - CodeRepos::Share - Trac
javascript - String.prototype.tr() released【404 Blog Not Found】at 2008年05月22日 02:28
textarea の内容によってサイズを自動的に伸縮させる、というトピックがあったので… textareaのサイズを入力にあわせて調整するJavaScript javascript - 勝手に添削 - textareaの高さを自動調節 便乗してみたいと思います。 桁数が増えて自動改行した場合にも対
自動伸縮するtextarea【ニッチー・ブラックモア】at 2008年05月21日 20:54
「やるならここまで徹底して実装しようよ」という私は変態ですか?そうですか。cod...
全てのtextareaを自動的にリサイズするJavaScriptとGreasemonkey【Kanasansoft Web Lab.】at 2008年05月21日 20:03
添削後が悪いという意味ではないが、添削後のソースって、C言語・昔のPerl言語で書かれるソーススタイルで、どうもオレドコの好みに合わない。try{}catch{}のこの使い方には確かに疑問は残るが、後半の現在の textareaの行数の値をみて操作するのはこっちのほうがよさそうに...
添削前のコードの方が良いと思う【オレドコBlog】at 2008年05月21日 12:06
やっぱりこういう需要もあるんですね。 textareaのサイズを入力にあわせて調整するJavaScript javascript - 勝手に添削 - textareaの高さを自動調節 上のリンク先のサンプルでは改行コードの数で高さを調節しています。 で、折角の機会ですので私が以....
Re:textareaの高さを自動調節【Agのノート】at 2008年05月20日 17:38
textareaのサイズを入力にあわせて調整するJavaScript (イラスト...
Re:javascript - 勝手に添削 - textareaの高さを自動調節【でぃべろっぱーず・さいど】at 2008年05月20日 14:56
この記事へのコメント
ライセンスを教えていただけないでしょうか?
Posted by penguin_teku_teku at 2011年05月29日 22:53
おっと、私の勘違いでした。
Posted by rish314 at 2008年09月27日 09:36
> for (var i = 0, l = value.length; i < l; i++){

の部分のところ、カンマではなく、セミコロンでは?
i = 0;
Posted by rish314 at 2008年09月27日 09:27
このJSはとても便利ですね
なぜかCGIに組み込むと動作しませんでしたが・・
なぜなんでしょう
Posted by もす at 2008年06月25日 03:32
\n を区切り文字にして配列に変換。各要素の文字数をgetAttributeNode("rows").nodeValueで割った数値をceilで切り上げると、正確な行数が割り出せます。
また、改行と同時にスクロールバーが出てきて鬱陶しいので、CSSで overflowを“hidden”にしておくと、より動作がきれいに。

Facebookのメール送信フォームが良いできばえ。
Posted by uetam at 2008年05月30日 13:13
はてブのコメントによると、横に長いと上手く処理できない為、対策が必要なようです。
http://www.akatsukinishisu.net/wiki.cgi?memo%2Dresize_textarea
Posted by   at 2008年05月21日 11:23
WinXP+IE7でもちゃんと動作しました。
Posted by シンタニタカシ at 2008年05月21日 08:44
これはいいですね
改行ではなく長くて折り返した行数には対応していないので、やっぱりスクロールバーのお世話にはなりますが :-)
Posted by jo at 2008年05月20日 22:41
\nをカウントした方が、改行付きのコピペが来た時にも対応するので便利ですよね。
Great!
Posted by sf at 2008年05月20日 22:18