メモ的な日記

プログラミングについての個人的メモ日記。PHPとかjQueryとかがメイン。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

テキストエリアにヘルプ表示

テキストエリアにヘルプを表示してみます。
すかし文字で表示して、フォーカスを取得したら消える感じ。
こちらを参考にしました。

外部ファイルは以下
・jquery.watermarkinput.js

<head>にjQuery呼び出し記述

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<body>部分

<script type="text/javascript" src="jquery.watermarkinput.js"></script>

<script type="text/javascript">
<!--
	$(function() {
		$("#username").Watermark("ユーザ名");
		$("#password").Watermark("パスワード");
		$("#email").Watermark("example@example.co.jp");
		
		$("#clearAll").click(function() {  
			$.Watermark.HideAll();  
		});
		
		$("#showAll").click(function() {  
			$.Watermark.ShowAll();  
		});  
	});
-->
</script>

<fieldset>
	<legend>ユーザ情報</legend>
	ユーザ名<input type="text" id="username"/>
	パスワード<input type="password" id="password"/>
	E-mail<input type="text" id="email"/>
	
	<p>
	<input type="button" id="clearAll" value="ヘルプを消す" />
	<input type="button" id="showAll" value="ヘルプを表示" />
	</p>
</fieldset>

こんな感じになります→サンプル

おわり。