Javascriptで入力中のテキストボックスの背景色を変える

Javascriptでブラウザー上で入力中のエリアをわかりやすくするためにフォーカスのあるテキストボックスの背景色を変えてみます。

HTMLで入力中の背景色を変える

HTMLで入力中の背景色を変える

よくあるパターンで入力中のエリアをわかりやすくするためにフォーカスのあるテキストボックスの背景色を変えてみます。

背景色を変えるには「style」の「backgroundColor」を操作する

背景色を変えるにはその部品の「style」にある「backgroundColor」をJavascriptで書き変えます。

objct名.style.backgroundColor = '表示したい背景色' ;

実際に変更する際の処理は

<SCRIPT language="JavaScript">
    //入力中のテキストボックスの背景色を設定
    function editColor( item_name )
    {
        var item =document.getElementsByName( item_name ) ;
        item[ 0 ].style.backgroundColor = '#FFFF66' ;
    }
</SCRIPT>

のように「backgroundColor」に変更したい色を設定します。

色を元に戻すためにもう一つ関数を用意します。

<SCRIPT language="JavaScript">
    //通常のテキストボックスの背景色を設定
    function defaultColor( item_name )
    {
        var item = document.getElementsByName( item_name ) ;
        item[ 0 ].style.backgroundColor = '#FFFFFF' ;
    }
</SCRIPT>

入力テキストボックスでフォーカスの有無を取得

入力テキストボックス側では「onFocusイベント」と「onBlurイベント」を使って背景色を操作します。

<INPUT type="text" name="textbox1" onFocus="editColor(this.name)" onBlur="defaultColor(this.name)">

実際にHTMLを作成して実行

実際にHTMLを作成して入力中のテキストボックスの背景色を変更します。

<HTML>
    <HEAD>
        <SCRIPT language="JavaScript">
            //入力中のテキストボックスの背景色を設定
            function editColor( item_name )
            {
                var item = document.getElementsByName( item_name ) ;
                item[ 0 ].style.backgroundColor = '##FFFF66' ;
            }

            //通常のテキストボックスの背景色を設定
            function defaultColor( item_name )
            {
                var item = document.getElementsByName( item_name ) ;
                item[ 0 ].style.backgroundColor = '#FFFFFF' ;
            }
        </SCRIPT>
    </HEAD>
    <BODY>
        <FORM name="mainForm">
            <INPUT type="text" name="textbox1" onFocus="editColor(this.name)" onBlur="defaultColor(this.name)">
            <BR>
            <INPUT type="text" name="textbox2" onFocus="editColor(this.name)" onBlur="defaultColor(this.name)">
       </FORM>
    </BODY>
</HTML>

もっとシンプルにすると

editColor()関数とdefaultColor()にして

<SCRIPT language="JavaScript">
    //通常のテキストボックスの背景色を設定
    function setInputBackGroundColor( item_name, flg )
    {
        var item = document.getElementsByName( item_name ) ;
        if( flg == 'on'){
            item[ 0 ].style.backgroundColor = '#FFFF66' ;
        }
        else{
            item[ 0 ].style.backgroundColor = '#FFFFFF' ;
        }
    }
</SCRIPT>

にして呼び出す側で

<INPUT type="text" name="textbox1" onFocus="setInputBackGroundColor(this.name,'on')" onBlur="setInputBackGroundColor(this.name,'off')">

とするのも良いでしょう。