HTTPサーバーとWeb開発

91. Javascriptで背景色を変える

Webアプリケーションでは入力妥当性検査を Javascript によって行う。
Webサイトの会員登録フォームでよく見られる、入力内容にエラーがあれば

といったような動作も Javascript によるものである。

この動作のうち、エラーダイアログの表示については「 89. ALERT内での改行方法 」で
紹介している通りだが、入力フォームの背景色についてはどのように変更するのであろうか？
変更の方法は色々あるが、ここでは HTML のスタイルを変更する方法を紹介しよう。

スタイルの変更にはもちろん Javascript を利用する。
HTML内の要素の styleプロパティへアクセスして内容を書き換えるのである。
例えばHTML内へ、 

<input type="text" id="SHCODE">

次のような <input>が存在した場合には、次のようにに記述することで
<input> の style プロパティへアクセスできる。 

document.getElementById('SHCODE').style.(スタイルのプロパティ名)

背景色を変更するにはプロパティ：backgroundColor を変更すればよいので、 

document.getElementById('SHCODE').style.backgroundColor

となる。
このプロパティに対して、カラーネーム もしくは #000000 〜 #FFFFFF からなる
カラーコードを指定することで背景色を自由に変更していくのだ。
例えば背景色を赤色にするなら次のようにカラーネーム：RED を記述すればよい。 

document.getElementById('SHCODE').style.backgroundColor = 'RED';

これを入力エラーが発生したフォームへ指定するだけで、簡単に背景色を変更できる。
実際に変更の処理を行う入力チェックのサンプルを紹介する。
必要最低限のシンプルなプログラムではあるが、基本的な動作はこれだけで実現可能である。

【入力チェックのサンプル】

フォームへ [ 全角文字 ] を入力してフォーカスを外してください。

商品コード： 

<html>
  <head>
     :
     :
  <script language="JavaScript">
    function chkFrm(val){
      //ﾌｫｰﾑの色を初期値の 白 に戻す
      document.getElementById('SHCODE').style.backgroundColor = '#FFFFFF';
      //値のﾁｪｯｸ
      if(val.match(/[^0-9a-zA-Z]/g)){
          //半角英数以外の場合は背景色を 薄赤 へ変更
          document.getElementById('SHCODE').style.backgroundColor = 'mistyrose';
          alert('入力内容：'+val+'\n半角英数で入力してください。');
      }else{
          alert('入力内容：'+val+'\n正しく入力されています。');
      }
    }
  </script>
  </head>
  <body>
       :
       :
    商品コード<input type="text" id="SHCODE" onchange="chkFrm(this.value)">
       :
    </form>
  </body>
</html>

■ フィールドの反転表示

次に5250画面のようなエラーフィールドの反転表示も紹介しよう。
反転表示の場合は、背景色だけでなく 文字色 も変更してやればよい。
文字色のプロパティ：color なので、 

document.getElementById('SHCODE').style.color

に背景色同様カラーネーム もしくは #000000 〜 #FFFFFF からなるカラーコードを指定すればよい。

【フィールドの反転表示のサンプル】

フォームへ [ 全角文字 ] を入力してフォーカスを外してください。

商品コード： 

<html>
  <head>
     :
     :
  <script language="JavaScript">
    function chkFrm2(val){
      //ﾌｫｰﾑの背景色を初期値の 白 に戻す
      document.getElementById('SHCODE2').style.backgroundColor = '#FFFFFF';
      //ﾌｫｰﾑの文字色を初期値の 黒 に戻す
      document.getElementById('SHCODE2').style.color = '#000000';
      //値のﾁｪｯｸ
      if(val.match(/[^0-9a-zA-Z]/g)){
          //半角英数以外の場合は背景色を 青 へ変更
          document.getElementById('SHCODE2').style.backgroundColor = '#316AC5';
          //半角英数以外の場合は文字色を 白 へ変更
          document.getElementById('SHCODE2').style.color = '#FFFFFF';
          alert('入力内容：'+val+'\n半角英数で入力してください。');
      }else{
          alert('入力内容：'+val+'\n正しく入力されています。');
      }
    }
  </script>
  </head>
  <body>
       :
       :
    商品コード<input type="text" id="SHCODE2" onchange="chkFrm2(this.value)">
       :
    </form>
  </body>
</html>