j-7入力フォームが空のときに入力案内を表示

htmlにテキストボックスを挿入

→ index.html(新規ファイル)を開く
→ テキストフィールドを挿入・・・挿入→ フォーム→ テキストフィールド
→ inputタグ内で半角スペース→ value → 表示したい文字をいれ、JavaScript部分をinputタグ内に書き込む

onFocus="HideFormGuide(this,'表示したい文字');" onBlur="ShowFormGuide(this,'表示したい文字');"

→ 入力前の文字と後の文字の色が変わるようにinputタグ内に以下を記述

 style="color:#999999"

※仮に「お名前」だとしたら以下のようになる

<input size="20" type="text" name="名前" value='お名前' style="color:#999999" onFocus="HideFormGuide(this,'お名前');" onBlur="ShowFormGuide(this,'お名前');">

 

form.jsを実装

→新規jsファイルを作成 内容は下記

   function ShowFormGuide(obj,GuideSentence) {
      // 入力案内を表示
      if( obj.value == '' ) {
         obj.value = GuideSentence;
         obj.style.color = '#808080';
      }
   }
   function HideFormGuide(obj,GuideSentence) {
      // 入力案内を消す
      if( obj.value == GuideSentence ) {
         obj.value='';
         obj.style.color = '#000000';
      }
   }

→form.jsで保存しリンクする

見ていただいてありがとうございます。↓ポチしてくださいませ。
  • もう少し詳しく書いて! (3)
  • 見た (1)
  • 見たけど役立たず (0)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次