JavaScript | テキストエリアを文章の行数に応じて拡縮する方法

2021-02-022022-02-06JavaScript フォーム,JavaScript

テキストエリアを入力されている文章の行数に応じて自動で拡縮（サイズを広げる、またさ縮める）させる実装サンプルです。

See the Pen JavaScript | Create a random string by yochans (@yochans) on CodePen.

テキストエリアを文章の行数に応じて拡縮する

テキストエリアを文章の行数に応じて拡縮させるJavaScriptのサンプルコードです。

サンプルではテキストエリアに対してidでの指定は行っていませんので、ページ内またはサイト内に複数のテキストエリアがある場合は、idやclassを指定して実装して下さい。

<textarea name="" rows="4" cols="40"></textarea>

//textarea
const textarea = document.querySelector('textarea');

//textarea event
textarea.addEventListener('keyup', textarea_ivent);

function textarea_ivent() {
	//valueから行数を取得
	let line = textarea.value.split('\n').length;
	
	if(line <= 3){
		line = 3;
	}
	
	//行数分のrowsに変更
	textarea.rows = line + 1;
}

テキストエリア内でのキー入力イベント。

「change」「onchangeイベント」ではなく「keyup」を利用しています。

textarea.addEventListener('keyup', 関数);

テキストエリア内の文章を取得して行数を数える。

let line = textarea.value.split('\n').length;

テキストエリアの行数（rows）を変更する。

textarea.rows = 行数;