[css]テキストエリアのリサイズのデザインを変える方法

2024年12月10日

テキストエリアのリサイズボタンのデザインを変えたい。

テキストエリアを伸ばしたり縮めたりする機能であるリサイズ。
下記のように右下のデフォルトのボタンから縮めることは可能です。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

ただ問題は、このリサイズボタンはデザインの変更ができないということ。
縮めるボタンって通常は、テキストエリアの上に配置されてたり直感的に分かりやすいです。

あまり情報がなかったのですがなんとか実装できました。

結論は：「自作でリサイズボタンを作って、Javascriptで挙動を制御する」です。

実際のコード

さて実際のコードがこちらです。
赤色のつまみを上下にドラッグすると、テキストエリアが縮みます。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

実装イメージはこんな感じです。

赤色の二本線を下にスクロール。
↓
スクロールした距離を、テキストエリアに足す。
(下にスクロールすると値がマイナスになるので、高さが小さくなる。反対に上にスクロールすると値がプラスになるので高さが大きくなる。)

コードの解説

さてそれではコードの解説です。

①まずは下記部分で、それぞれの要素を取得します。

const container = document.querySelector('.custom-textarea-container');
const textarea = container.querySelector('textarea');
const handle = container.querySelector('.resize-handle');

②mousedownイベントでドラッグした時の挙動を調整

下記部分でドラッグした時にテキストエリアの高さと、ドラッグした時の座標を取得する。

handle.addEventListener('mousedown', (event) => {
  const startY = event.clientY; // ドラッグ開始時のマウスY座標
  const startHeight = textarea.offsetHeight; //
});

mousedownイベントは、マウスをドラッグした時に発火するイベントです。

よく使うclikcイベントは、ボタンをクリックして離した時に発火します。
そのためclickではドラッグしてる状態という感知の仕方はできない。

③スクロールするたびに、テキストエリアのサイズを変える。
mousemoveイベントで、スクロールする度に処理をします。

テキストエリアの縦幅から、スクロールした高さを引くことで計算。
高さが50px以上の時に算出した高さを都度入れ直す。
これで縮んでるように見えます。

const onMouseMove = (moveEvent) => {
    const deltaY = startY - moveEvent.clientY; // ドラッグの移動量（逆方向に計算）
    const newHeight = startHeight + deltaY; // 高さを増減

    // 高さが50px以下に縮まないよう制限
    if (newHeight > 50) {
      textarea.style.height = `${newHeight}px`;
    }
  };

mousemoveイベントは、マウスが動くたびに発火するイベントです。

④ドラッグをやめたときに、イベントを外す。
イベントを外す理由は、不要な挙動を防止するためです。
常にスクロールするたびにjsが動くとバグの原因になります。

const onMouseUp = () => {
    // イベントリスナーを削除してリサイズを停止
    window.removeEventListener('mousemove', onMouseMove);
    window.removeEventListener('mouseup', onMouseUp);
  };

mouseupイベントとは、マウスが離れたときに発火するイベントです

以上です。
これでテキストエリアのリサイズデザインを変更し、jsで縮める処理の実装ができます。