<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
window.onload = function() {
var obj = document.forms;
if (!obj) return;
for (var i = 0; i < obj.length; i++) {
var ele = obj[i].elements;
for (var j = 0; j < ele.length; j++) {
if (ele[j].type != "text") continue;
ele[j].onfocus = value_clear;
ele[j].onblur = value_default;
}
}
}
function value_clear() {
if (this.value == this.defaultValue) this.value = "";
}
function value_default() {
if (!this.value) this.value = this.defaultValue;
}
// -->
</script>
</head>
<body>
<form action="#">
<input type="text" name="text1" value="入力してください">
<input type="text" name="text2" value="記入してください">
<input type="text" name="text3" value="">
<input type="reset">
<input type="submit" value="送信">
</form>
</body>
</html>
まず、ページが全て読み込まれたら、フォームの存在をチェックしてそのフォームにあるテキストフィールドのみ onfocus, onblur のイベントハンドラを適用します。テキストフィールドが1つもなければこのスクリプトは適用されません。
テキストフィールドにフォーカス (onfocus) した時に関数 value_clear が呼ばれ、入力されている値が value の文字列と同じならば、表示されている文字を削除します。defaultValue はテキストフィールドにあらかじめ指定している value の値を指します。
そして、フォーカスが外れた時 (onblur) に関数 value_default が呼ばれ、そのフィールドに何も入力されていなければ、元の value に指定している文字列を表示します。
なお、value に何も指定していない場合でもスクリプトは動作していますが、代入するものが何もありませんので表示上ではこのスクリプトが適用されていない状態と同じことになります。
<form action="#"> <input type="text" name="text1" value="入力してください" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"> <input type="reset"> <input type="submit" value="送信"> </form>
任意のフィールドのみ使用する場合は上記のようにします。