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で保存しリンクする