スポンサードリンク


textareaの高さを自動調整する便利なjQuery!height100が効かない場合におすすめのスクリプトを公開!

テキストエリア 高さ 自動調節

改行文章の入力に対応するtextareaタグで入力内容の量に応じて、
高さを自動調節する方法がないか考えてみました。

基本textareaタグでは高さは固定長・可変長の値を指定できますが、入力文字数によって高さが自動調整されることはありません。

仮にheight:100%;を指定しても親要素の高さにみに行くだけなので意味がないです。

autoresizeみたいな属性があればいいんですけどね・・・。

とりあえずテキストエリアで高さを自動調節するスクリプトを作りました。

 

textareaタグの高さを文字数によって自動調節する方法

 高さの自動調節が困難なtextareaタグに挑戦してみました

まずはサンプルとしてHTMLソース内にtextareaタグを1個記述しておきます。

 HTML

この時にidにsampleという名称を付け定義します。
後述のサンプルソース内に使っていきますので、任意の名前を付けておきましょう。

幅は100%表示させておきます。ここもお好みで指定して下さい。

 

jQueryでtextareaの高さを自動調節

jQueryを実装しているウェブサイトならこちらがおすすめ
 JavaScript

 

上記スクリプトを実装した後にautoheightイベントを呼び出してあげれば動作します。

 

スポンサードリンク

 

JavaScriptでtextareaの高さを自動調節

jQueryを使わないウェブサイト用に作成
 JavaScript

 

上記スクリプトを実装した後にautoheightイベントを呼び出してあげれば動作します。

イベントを発火させるが非常に面倒なのでjQuery使った方が楽です。

 

textareaの高さが自動調整された場合の状態

実際にautoheightイベントのスクリプトを動作させると以下のように表示されます。

テキストエリア 高さ 自動調節

初期表示ではスクロールしないと入力文字が全部見れない状態ですが、
autoheightイベントを実行すると自動的に高さが計算され、文字列の量に応じて可変処理が行なわれます。

逆に下側に余白ができてしまうケースでは、余白を消すことも可能です。

 

おまけ

textareaの枠線を消す

ただ枠線を非表示にするだけです。

 

textareaのリサイズ機能を無効化

テキストエリアの右下のリサイズコントロールを無効化できます。

但し古いIEだと機能しないので注意が必要です。

 

textareaを読み取り専用に変更

入力された文字列を変更できないようにする属性です。

 

まとめ

jQuery版もJavaScript版もやっていることはほぼ同じになります。

前者はon関数を、後者はaddEventListener関数を定義して、
textareaタグに対してautoheightというユーザ定義のイベントを登録しています。

 

スクロール表示されている場合は、文字が隠れてしまっているので、
スクロール領域の高さをheightに指定してあげて入力文字列がすべて見える状態になります。

逆にスクロール表示されず、テキストエリアの下側に空白が開いてしまっている場合は、
1行間隔(lineHeight:20px)ずつheightを小さくしていきちょうどいい高さになるまで繰り返すというプログラムです。

 

あくまで初期表示で高さを自動計算しているので、
ブラウザの幅を変更したり、そのウェブサイトを閲覧している端末によってはレイアウトが崩れる恐れがあります。

ブラウザの幅を変更する分にはwindowの変更イベントでautoheightを発火させてあげれば良いと思いますが・・・。

試していないのでどうなることやら・・・。

textareaの本来の用途とはかけ離れた使い方の為、ちょっとしたおまけに活用するのが良いでしょう。

The following two tabs change content below.
よっき
パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

スポンサードリンク


コメントを残す




*

このページの先頭へ