JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年11月 / 10月<< 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 >>12月

アクセスランキング

[ジャンルランキング]
コンピュータ
269位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
38位
アクセスランキングを見る>>

自動で伸縮するtextarea

今エディタ系のアプリケーションを開発しています。

textareaのちょうど良い大きさが中々決められず、この際場合場合で伸縮させようと思い、方法を調べてみました。

デモ

変更後の高さの算出方法にどのようなものがあるか調べてみたところ、
1.改行コードの数を数えて算出する
2.改行コードの数と行ごとの文字数を数えて算出する
3.スクロール位置の変更を検知して算出する
4.スクロールバーの領域内を含めた高さを取得して算出する
などなど。

1と2はフォントやパッディング、ブラウザなど様々な要因で誤差が発生しやすい、3はスクロールバーが表示されたり隠れたりして見栄えが良くない、ロード時にスクロールバーが表示されていると対応できない、ということから4を使うことにしました。

ここで使うプロパティは2つです。
Element.offsetHeight
要素の高さを取得する

Element.scrollHeight
要素の高さ(スクロールの部分も含め)を取得する

スクロールバーが表示されなくても良いように自動で高さを必要な高さより大きめに設定すれば、表示されなくなるというわけです。
textArea.style.height = (textArea.scrollHeight + 10) + "px";
"10px"の部分はそれぞれ調整してください。

これをonKeyPressイベントかIntervalにセットすれば、自動で伸びるtextareaの完成です。

次に縮める処理ですが、こちらも簡単です。
heightに5pxなど小さ目の数字をセットすれば、あとは先に書いた処理で自動的に高さを合わせてくれます。
見た目に違和感があるのでこちらはフォーカスがあたった時/外れた時などのみの処理にすることをお勧めします。

コーディングするとこんな感じ。
var textArea = document.getElementById("textArea");

setInterval(function(){
    if (textArea.scrollHeight > textArea.offsetHeight){
        textArea.style.height = (textArea.scrollHeight + 10) + "px";
    }
},100);

var func = function(){
    textArea.style.height = "50px";
}

textArea.onblur = func;
textArea.onfocus = func;

おそらくこれは多用しすぎると鬱陶しがられるのでほどほどにしましょう。
#この話とあまり関係ありませんが、使いやすいUIの開発ってなかなか難しいですね…
 


 
   JavaScript    TB(1)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

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

まとめtyaiました【自動で伸縮するtextarea】 [ まとめwoネタ速neo ]
今エディタ系のアプリケーションを開発しています。textareaのちょうど良い大きさが中々決められず、この際場合場合で伸縮させようと思い、方法を調べてみました。デモ変更後の高さの算出方法にどのようなものがあるか調べてみたところ、1.改行コードの数を数えて算出する...
2012年05月21日(月) 03:37

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。