[完全版] テキストエリアの行数自動調整、サイズ固定のテクニックまとめ。

2024年1月6日

Contents

1. 入力内容で高さを自動調整するテキストエリア(textarea)の実装や、高さ幅を固定化する実装についてまとめました。
2. ①テキストエリア(textarea)にて、入力内容に応じて高さを可変自動調整する
3. ②テキストエリア(textarea)をサイズ固定で制限する方法。縦のみ、横のみリサイズ可能とすることも。
4. ③複合ケース：「高さを入力内容に応じて自動調整」「ただし高さの最大値に制限を設ける」「水平方向はリサイズ不可」

入力内容で高さを自動調整するテキストエリア(textarea)の実装や、高さ幅を固定化する実装についてまとめました。

テキストエリア(textarea)はウェブサイトにおいてたくさんの文字を入力することができる便利なコントロールです。

しかし、ユーザが自由にテキストエリアのサイズを変更してしまいレイアウトが崩れてしまうことや、入力文字数が多くなるとスクロールが小さくなってしまい使いにくくなってしまうなどの利便性の問題も発生しやすい入力部品です。

本記事ではテキストエリア周りの実装テクニックをまとめました。本記事の内容を読むと以下のことが出来るようになります。

入力内容で高さを自動調整する
サイズを完全に固定する
横のみ固定し、縦はスクロール可能とする
縦のみ固定し、横はスクロール可能とする
スクロール可能とするが、リサイズする高さに制限を設ける

こちらのサンプルのように「高さを入力内容に応じて自動調整」「一定の高さ以上になったらそれ以上大きくならない」「横は固定化しリサイズ不可」と組み合わせることも可能です。

サンプル

①テキストエリア(textarea)にて、入力内容に応じて高さを可変自動調整する

まずは入力内容に応じて高さを可変自動調整する実装の説明です。

JSにて簡単に実装ができます。使い方のチュートリアルとして、以下サンプルで順を追って説明していきます。

入力内容に応じて高さを可変自動調整

サンプル

HTMLサンプルコード ※ダブルクリックでコピペできます

<textarea class='resize' rows='3' placeholder='高さ自動調整するテキストボックスです'></textarea>

1	<textarea class='resize'rows='3'placeholder='高さ自動調整するテキストボックスです'></textarea>

JSサンプルコード ※ダブルクリックでコピペできます

$('textarea.resize').on('keydown', function(){
  var textarea = this;
  setTimeout(function(){
    textarea.style.cssText = 'height : auto;';
    textarea.style.cssText = 'height : ' + textarea.scrollHeight + 'px;';
  },0);
});

$('textarea.resize').on('keydown',function(){

vartextarea=this;

setTimeout(function(){

textarea.style.cssText='height : auto;';

textarea.style.cssText='height : '+textarea.scrollHeight+'px;';

},0);

});

今回はclass「resize」を持つテキストエリアに対して、onのkeydownイベントで高さを調整するJSスクリプトを記述しました。

テキストエリアの高さを調整する方法は色々あります。よく見るのは高さを計算して調整しているパターンです。ですが、処理が複雑になりがちな上に実装によってはズレやすくなってしまいます。そこで本サンプルでは「height : auto」を使うことで得た高さを利用し、HTMLの自動調整値に任せて調整する方式で記述量を減らしシンプルにしています。

またイベントに関しても、onのchange、cut、paste、keydown等の複数のイベントを設定してテキストエリアの高さを変更するケースが多いように見受けられます。しかし、このやり方だとガタガタと動いてしまい綺麗でスムーズなサイズ調整動作となりません。そこで本サンプルではkeydown+setTimeoutを使うことでスムーズな動きを実現しています。

このように、setTimeoutは0指定を行うことで、コントロールに疑似基本動作のようなものを与えることができます。setTimeoutについては以下記事を参照ください。

setIntervalとsetTimeout使い方と実践サンプル8本。イケてるjQueryアニメーションの基

カッコいいウェブサイトはみんな使ってる！？「setInterval」「setTimeout」を使いこなせ！ jQueryを使 ...

https://kodocode.net/design-js-setinterval/

②テキストエリア(textarea)をサイズ固定で制限する方法。縦のみ、横のみリサイズ可能とすることも。

テキストエリアのもう１つの問題点は右下にある三角の部分をドラッグして動かすと、自由にサイズを変更できてしまう点です。

利用者が見やすく入力するのに便利な機能ではありますが、ウェブサイトのデザインや機能によってはサイズ固定にして制限したいケースもあるかと思います。

この場合は簡単なCSSで制限を加えることができます。以下サンプルで順を追って説明していきます。

テキストエリアをサイズ固定で制限

サンプル

HTMLサンプルコード ※ダブルクリックでコピペできます

<textarea class='fixed-all' rows='3' placeholder='リサイズ不可の固定テキストボックスです'></textarea>
<textarea class='fixed-vertical' rows='3' placeholder='高さのみリサイズできるテキストボックスです'></textarea>
<textarea class='fixed-horizontal' rows='3' placeholder='幅のみリサイズできるテキストボックスです'></textarea>

CSSサンプルコード ※ダブルクリックでコピペできます

textarea.fixed-all {
  resize: none;
}

textarea.fixed-vertical {
  resize: vertical;
}

textarea.fixed-horizontal {
  resize: horizontal;
}

textarea.fixed-all {

resize:none;

}

textarea.fixed-vertical {

resize:vertical;

}

textarea.fixed-horizontal {

resize:horizontal;

}

テキストエリアのサイズ固定は「resize: 〇〇〇」のCSSを付与するだけで簡単で制御することができます。

「none」の場合は完全にサイズ固定。「vertical」「horizontal」の場合は、それぞれ垂直方向・水平方向のみリサイズを許可します。

デザインの作りやすさとして、良く使うのは「resize: vertical」です。水平方向は初期デザインの状態で充分に幅のある設計としてユーザの利便性を確保し、「リサイズは許可しない」とした方がデザイン性と利便性の両方を実現できます。一方、垂直方向は自動調整を実装したり、ユーザが入力量に応じて広げたい場合もあるので、リサイズを許可しておいた方が望ましいのです。

③複合ケース：「高さを入力内容に応じて自動調整」「ただし高さの最大値に制限を設ける」「水平方向はリサイズ不可」

ここまで説明した自動調整・サイズ固定は複合して使うことができます。

事例として、「高さを入力内容に応じて自動調整」「ただし高さの最大値に制限を設ける」「水平方向はリサイズ不可」という仕様のテキストエリア(textarea)を実装してみましょう。

複合ケース

サンプル

HTMLサンプルコード ※ダブルクリックでコピペできます

<textarea class='resize fixed-vertical fixed-max' rows='3' placeholder='高さは自動調整、高さリサイズ上限あり、水平方向はリサイズ不可のテキストボックスです'></textarea>

1	<textarea class='resize fixed-vertical fixed-max'rows='3'placeholder='高さは自動調整、高さリサイズ上限あり、水平方向はリサイズ不可のテキストボックスです'></textarea>

CSSサンプルコード ※ダブルクリックでコピペできます

textarea.fixed-vertical {
  resize: vertical;
}

textarea.fixed-max {
  max-height: 500px;
}

textarea.fixed-vertical {

resize:vertical;

}

textarea.fixed-max {

max-height:500px;

}

JSサンプルコード ※ダブルクリックでコピペできます

$('textarea.resize').on('keydown', function(){
  var textarea = this;
  setTimeout(function(){
    textarea.style.cssText = 'height : auto;';
    textarea.style.cssText = 'height : ' + textarea.scrollHeight + 'px;';
  },0);
});

$('textarea.resize').on('keydown',function(){

vartextarea=this;

setTimeout(function(){

textarea.style.cssText='height : auto;';

textarea.style.cssText='height : '+textarea.scrollHeight+'px;';

},0);

});

最初のサンプルと同様にJSにて高さの自動調整を実装しています。さらにCSSで「max-height: 500px」を設定しました。

テキストエリアに入力していくと最初はテキストエリアの高さが伸びていきますが、500pxに達した時点で拡張が止まり、そこからはスクロールが伸びていく動きとなります。デザインや機能の都合でどうしても縦幅を無制限にしたくない場合に便利です。

以上となります。

テキストエリアを上手に使って使いやすいUIのウェブサイトを作っていきましょう！

2022年5月5日2024年1月6日DesignCSS,jQuery,初心者向け

Posted by KodoCode