１）テキストフィールドのフォーカス移動時に初期値を削除する
　①テキストフィールドにフォーカスが入ったときに初期値で表示されている文字が消えるようにします。
　　　＜ファイル名：js11-1-1.html＞ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" src="js11-1-1.js"></script>
</head>
<body>
フォーカスでデフォルト表示を削除する<br />
<form id="formId" name="formName">
氏名：<input type="text" name="tfName1" id="tfId1"><br>
住所：<input type="text" name="tfName2" id="tfId2"><br>
E-Mail：<input type="text" name="tfName3" id="tfId3"><br>
</form>
</body>
</html>
　　　　＜ファイル名：js11-1-1.js＞ 
setEventListener(window,"load",window_onLoad);
    function setEventListener(obj,event,func){
    if(navigator.appName.indexOf("Microsoft")>-1){
        obj.attachEvent("on"+event,func);
    }
    else{
        obj.addEventListener(event,func,false);
    }
}

function window_onLoad(){
    jsTfId1=document.getElementById("tfId1");
    jsTfId1.style.color="#b8b8b8";
    jsTfId1.value="名前を入力してね。";
    setEventListener(jsTfId1,"focus",valueClear);
    setEventListener(jsTfId1,"blur",valueSet); 
}

function valueClear(){
    jsTfId1.value="";
    jsTfId1.style.color="orange";
}

function valueSet(){
    jsTfId1.style.color="#b8b8b8";
    jsTfId1.value="名前を入力してね。";
}

　②上記、プログラムでは、テキストフィールドの文字を変更してもフォーカスが移れば、元の初期値に戻ってしまいます。そのようなことにならないように
　　　以下のようにします。
　　　＜ファイル名：js11-1-2.html＞ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" src="js11-1-2.js"></script>
</head>
<body>
フォーカスでデフォルト表示を削除する<br />
<form id="formId" name="formName">
氏名：<input type="text" name="tfName1" id="tfId1"><br>
住所：<input type="text" name="tfName2" id="tfId2"><br>
E-Mail：<input type="text" name="tfName3" id="tfId3"><br>
</form>
</body>
</html>
　　　　＜ファイル名：js11-1-2.js＞ 
setEventListener(window,"load",window_onLoad);
function setEventListener(obj,event,func){
    if(navigator.appName.indexOf("Microsoft")>-1){
        obj.attachEvent("on"+event,func);
    }
    else{
        obj.addEventListener(event,func,false);
    }
}

function window_onLoad(){
    jsTfId1=document.getElementById("tfId1");
    jsTfId1.style.color="#b8b8b8";
    jsTfId1.value="名前を入力してね。";
    setEventListener(jsTfId1,"focus",valueClear);
    setEventListener(jsTfId1,"blur",valueSet); 
}

function valueClear(){
    if(jsTfId1.value=="名前を入力してね。"){
        jsTfId1.value="";
        jsTfId1.style.color="orange";
    }
}

function valueSet(){
    if(jsTfId1.value==""){
        jsTfId1.style.color="#b8b8b8";
        jsTfId1.value="名前を入力してね。";
    }
}
　③住所、E-Mailも同じようにできるようにしてみる。
　　　＜ファイル名：js11-1-3.html＞
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" src="js11-1-3.js"></script>
</head>
<body>
フォーカスでデフォルト表示を変える<br />
<form id="formId" name="formName">
氏名：<input type="text" name="tfName1" id="tfId1"><br>
住所：<input type="text" name="tfName2" id="tfId2"><br>
E-Mail：<input type="text" name="tfName3" id="tfId3"><br>
</form>
</body>
</html>
　　　＜ファイル名：js11-1-3.js＞
setEventListener(window,"load",window_onLoad);
function setEventListener(obj,event,func){
    if(navigator.appName.indexOf("Microsoft")>-1){
        obj.attachEvent("on"+event,func);
    }
    else{
        obj.addEventListener(event,func,false);
    }
}

function window_onLoad(){
    jsTfId1=document.getElementById("tfId1");
    jsTfId1.style.color="#b8b8b8";
    jsTfId1.value="名前を入力してね。";
    setEventListener(jsTfId1,"focus",valueClear);
    setEventListener(jsTfId1,"blur",valueSet);
    jsTfId2=document.getElementById("tfId2");
    jsTfId2.style.color="#b8b8b8";
    jsTfId2.value="住所を入力してね。";
    setEventListener(jsTfId2,"focus",valueClear);
    setEventListener(jsTfId2,"blur",valueSet);
    jsTfId3=document.getElementById("tfId3");
    jsTfId3.style.color="#b8b8b8";
    jsTfId3.value="メルアドを入力してね。";
    setEventListener(jsTfId3,"focus",valueClear);
    setEventListener(jsTfId3,"blur",valueSet);
}

function valueClear(){
    if(jsTfId1.value=="名前を入力してね。"){
        jsTfId1.value="";
        jsTfId1.style.color="orange";
    }
    if(jsTfId2.value=="住所を入力してね。"){
        jsTfId2.value="";
        jsTfId2.style.color="orange";
    }
    if(jsTfId3.value=="メルアドを入力してね。"){
        jsTfId3.value="";
        jsTfId3.style.color="orange";
    }
}

function valueSet(){
    if(jsTfId1.value==""){
        jsTfId1.style.color="#b8b8b8";
        jsTfId1.value="名前を入力してね。";
    }
    if(jsTfId2.value==""){
        jsTfId2.style.color="#b8b8b8";
        jsTfId2.value="住所を入力してね。";
    }
    if(jsTfId3.value==""){
        jsTfId3.style.color="#b8b8b8";
        jsTfId3.value="メルアドを入力してね。";
    }
}
　　　　しかし、この方法ではvalueClear()、valueSet()イベントリスナー関数の中にある全ての「if」文を実行してしまいますので、どれかのテキストフィールドにフォーカスが入ると
　　　すべて消えてしまい、フォーカスが外れると全てのテキストフィールドに初期値が表示されてしまいます。
　　　　これは、イベントが発生したテキストフィールドを調べることをしていないため全てが対象になります。これを回避する方法は、全てのイベントから呼び出す関数をそれぞれ別に
　　　書いてテキストフィールドごとに関数処理するか、どのテキストフィールドからイベントが発生したかを調べる必要があります。イベントごとに別の関数を呼び出すことは、
　　　イベントの数だけ関数が必要になり、あまりいい方法とは言えません。
　　　　次節では、どのテキストフィールドからイベントが発生したかを調べる方法について説明します。