iPentec.com / Doc / JavaScript / HTML / HTML テキストボックス

編集状態のテキストボックスの背景色やボーダーを変更する - フォーカスのあるテキストボックスのスタイルの変更 - JavaScript

概要

編集状態になった(フォーカスのある)テキストボックスの背景色や枠の色を変更したい場合があります。この記事ではJavaScriptでフォーカス時のテキストボックスのスタイルを変更するコードを紹介します。

スタイルシートで実現する方法

スタイルシートで実現する方法もあります。スタイルシートのfocus疑似クラスを利用すると、スタイルシートを記述することでフォーカス時のスタイルを変更できます。記述方法についてはこちらの記事やこちらの記事を参照して下さい。

実装例

コード

下記のHTMLファイルを作成します。

TextBoxFocus.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ブラウザで表示します。下図の画面が表示されます。

テキストボックスをクリックして編集状態にすると背景色が変わります。

フォーカスが失われると背景色が白になります。

補足1:Internet Explorer での動作

先のコードではInternet Explorerの場合、一度フォーカスがあたったテキストボックスの外観が微妙に変わってしまいます。外観が変わらないようにする場合は、コードを下記に変更しスタイルの指定を追加します。

TextBoxFocus.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";
            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ブラウザで表示します。下図の画面が表示されます。

テキストボックスをクリックして編集状態にすると背景色が変わります。

フォーカスが失われると背景色が白になります。

フォーカスが一度あたったテキストボックスも元の外観に戻ります。

補足2:フォーカス解除後の外観の違い対策

上記の方法で、テキストボックスの外観が変更されてしまう現象は回避できますが、 Webブラウザによってデフォルトのスタイルが異なるため、フォーカス解除後の表示がデフォルトの表示と微妙に違ってしまう場合があります。

先のコードで動作を確認します。ページを表示します。

テキストボックスにフォーカスを当てます。

フォーカスを解除します。テキストボックスの横幅が元のサイズよりわずかに短くなっています。

最初の状態と同じ外観にするためには、あらかじめテキストボックスのスタイルを定義しておくことで回避できます。

コード

以下のコードを準備します。

TextBoxFocusDS.css

.TextBox {
  background-color: #FFFFFF;
  border: #707070 1px solid; padding:2px;
}

TextBoxFocusDS.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>

  <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>