フォーカスが乗ったらテキストを消すJavaScript
下の2つのテキストフィールドにフォーカスを合わせてみてください。フォーカスを合わせるとは、マウスなどでクリックすることにより入力できる状態にすることです。
下のテキストフィールドにフォーカスが合ったらテキストフィールド内のテキストが消えたのがわかったと思います。そして、フォーカスが別の部分に移動したらまた元にもどります。
下のテキストフィールドはフォーカスが移動した時にテキストフィールドの値を判定して「テキストフィールド2」という文字列だった場合に値を削除しています。
そして、別の部分にフォーカスが移動した時に何も入力していなかった場合にまたもとの「テキストフィールド2」という文字列に戻ります。
何か文字列が入力された場合だけそのままになります。
フォーカスが移動した時と離れた時に実行する関数には自分自身を表すthisと判定用テキストを引数に渡します。判定用テキストを変えることで複数のテキストフィールドを設置して異なる初期値にしても対応できます。
HTML構造
<p>
<input type="text" value="テキストフィールド2"
onfocus="onfocusText(this,'テキストフィールド2')"
onblur="onblurText(this,'テキストフィールド2')"
tabindex="1" accesskey="A" />
</p>
JavaScript
function onfocusText(id,text) {
//var m = document.getElementById(ddmenu);
if(id.value == text) {
id.value = '';
}
return false;
}
function onblurText(id,text) {
//var m = document.getElementById(ddmenu);
if(id.value == '') {
id.value = text;
}
return false;
}
