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

2021-02-03JavaScript,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(e) {
	//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 = 行数;

2021-02-03JavaScript,JavaScript フォーム

Posted by Yousuke.U