スタイルシートで実現する方法もあります。
スタイルシートのfocus疑似クラスを利用すると、スタイルシートを記述することでフォーカス時のスタイルを変更できます。
記述方法についてはこちらの記事やこちらの記事を参照して下さい。
JavaScriptで編集状態のテキストボックスの背景色やボーダーを変更するコードを紹介します。
編集状態になった(フォーカスのある)テキストボックスの背景色や枠の色を変更したい場合があります。
この記事ではJavaScriptでフォーカス時のテキストボックスのスタイルを変更するコードを紹介します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function onFocus(control) {
control.style.backgroundColor = "#E0E0FF";
}
function onBlur(control) {
control.style.backgroundColor = "#FFFFFF";
}
</script>
</head>
<body>
<h3>JavaScriptでコントロールのフォーカス時にスタイルを変更する</h3>
<form>
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
</form>
</body>
</html>
HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
テキストボックスをクリックして編集状態にすると背景色が変わります。
フォーカスが失われると背景色が白になります。
先のコードではInternet Explorerの場合、一度フォーカスがあたったテキストボックスの外観が微妙に変わってしまいます。
外観が変わらないようにする場合は、コードを下記に変更しスタイルの指定を追加します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function onFocus(control) {
control.style.backgroundColor = "#E0E0FF";
control.style.border = "#707070 1px solid";
control.style.padding = "2px";
}
function onBlur(control) {
control.style.backgroundColor = "#FFFFFF";
control.style.border = "#707070 1px solid";
control.style.padding = "2px";
}
</script>
</head>
<body>
<form>
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
</form>
</body>
</html>
HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
テキストボックスをクリックして編集状態にすると背景色が変わります。
フォーカスが失われると背景色が白になります。
フォーカスが一度あたったテキストボックスも元の外観に戻ります。
上記の方法で、テキストボックスの外観が変更されてしまう現象は回避できますが、
Webブラウザによってデフォルトのスタイルが異なるため、フォーカス解除後の表示がデフォルトの表示と微妙に違ってしまう場合があります。
先のコードで動作を確認します。ページを表示します。
テキストボックスにフォーカスを当てます。
フォーカスを解除します。テキストボックスの横幅が元のサイズよりわずかに短くなっています。
最初の状態と同じ外観にするためには、あらかじめテキストボックスのスタイルを定義しておくことで回避できます。
以下のコードを準備します。
.TextBox {
background-color: #FFFFFF;
border: #707070 1px solid; padding:2px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="TextBoxFocusDS.css" />
<script type="text/javascript">
function onFocus(control) {
control.style.backgroundColor = "#E0E0FF";
control.style.border = "#707070 1px solid";
control.style.padding = "2px";
}
function onBlur(control) {
control.style.backgroundColor = "#FFFFFF";
control.style.border = "#707070 1px solid";
control.style.padding = "2px";
}
</script>
</head>
<body>
<h3>JavaScriptでコントロールのフォーカス時にスタイルを変更する</h3>
<form>
<input type="text" class="TextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" class="TextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" class="TextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" class="TextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
<input type="text" class="TextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
</form>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
テキストボックスにフォーカスを与えます。
フォーカスを解除します。元のデザインと同じ状態に戻りました。
