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

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

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

JavaScriptで実現する方法

コード

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

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


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


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


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


上記の方法で、テキストボックスの外観が変更されてしまう現象は回避できますが、Webブラウザによってデフォルトのスタイルが異なるためWebブラウザごとに調整をする必要があります。Webブラウザの依存を避けるにはあらかじめテキストボックスのスタイルを定義しておくことで回避できます。

TextBoxFocus.css

.sdtTextBox{
  backgroundcolor:#FFFFFF;
  border:"#707070 1px solid;
  padding:2px;
}
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>
    <link rel="stylesheet" type="text/css" href="TextBoxFocus.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>
    <form>
        <input type="text" class="sdtTextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
        <input type="text" class="sdtTextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
        <input type="text" class="sdtTextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
        <input type="text" class="sdtTextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
        <input type="text" class="sdtTextBox" onfocus="onFocus(this)" onblur="onBlur(this)" /><br />
    </form>
</body>
</html>
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)