フォームのテキストボックスの中にクリックすると消えるテキストを入れておくというおぼえがき

タイトル長いけど、よく見かけるこれ。
ページ内に何箇所かある場合はこれが一番シンプルで便利かも。
いちいちこれだけにjQueryとか使わなくてもいいし。

幾つか調べてちょうどいいものを見つけました。

>> クリックするとフォーム内の字が消えるJavascript by Devotion Time

スクリプト部分はこれ。

	function cText(obj){
	if(obj.value==obj.defaultValue){
	obj.value="";
	obj.style.color="#000";
	}
}
	function sText(obj){
	if(obj.value==""){
	obj.value=obj.defaultValue;
	obj.style.color="#999";
	}
}

実際のフォームの中にはこういう形でvalueの部分に好きな文字列をいれるだけ。
スタイルで色も設定できるね。

<input type="text" value="xxx@aaaabbbb.com"
 onFocus="cText(this)" onBlur="sText(this)" style="color:#999">

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です