JavaScript | フォーカスされているフォームのスタイルを変更する方法

2021-01-272021-01-28JavaScript フォーム,JavaScript

JavaScriptでフォーカスされているフォームの文字色や背景色、サイズなどのスタイルを変更する方法のサンプルコードです。

See the Pen JavaScript Get form text in real time by yochans (@yochans) on CodePen.

フォーカスされているフォームのスタイルを変更する

フォーカスされているフォームのスタイルを変更するにはCSSで「:focus」を使って指定する事も可能ですが、今記事ではJavaScriptで動的に変更させる方法の紹介となります。

上記、動作サンプルのサンプルコードです。

<p><input type="text" class="text_box" name=""></p>
<p><input type="text" class="text_box" name=""></p>
<textarea class="text_area" name="" rows="8"></textarea>

const target = document.querySelectorAll('.text_box, .text_area');

for(let i in target){
	if (target.hasOwnProperty(i)) {
		target[i].addEventListener('focus', focus_on_ivent);
		target[i].addEventListener('blur', focus_out_ivent);
	}
}

//フォーカスされた時
function focus_on_ivent(e) {
	e.target.style.background = '#ffdab9';
}

//フォーカスが解除された時
function focus_out_ivent(e) {
	e.target.style.background = '';
}

querySelectorAll()でclass名から対象のフォームを配列として取得しています。
カンマで区切る事で複数のidやclass名などを指定可能です。

const target = document.querySelectorAll('.text_form, .text_area');

idやclass名ではなく、要素の種別でも指定可能です。

const target = document.querySelectorAll('input[type="text"], textarea');

対象の要素にフォーカスされた時と、フォーカスが解除された時のイベントを追加します。
今回は別途「focus_on_ivent」「focus_out_ivent」という関数を用意しています。

for(let i in target){
	if (target.hasOwnProperty(i)) {
		target[i].addEventListener('focus', focus_on_ivent);
		target[i].addEventListener('blur', focus_out_ivent);
	}
}

フォーカスのオンオフで実行させる関数です。
サンプルでは単純に背景色のみをフォーカス時に変更、解除しています。

//フォーカスされた時
function focus_on_ivent(e) {
	e.target.style.background = '#ffdab9';
}

//フォーカスが解除された時
function focus_out_ivent(e) {
	e.target.style.background = '';
}