入力欄にウォーターマークを表示する/ユーザー補助/SolidStateEveryday

入力補助jquery.updnWatermark.js

スポンサードリンク

SAMPLE
CODE
DownLoad

<!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="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.updnWatermark.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $.updnWatermark.attachAll();
});
</script>
<style type="text/css">
.updnWatermark {
    color: #999;
    font-family: Sans-Serif;
    font-size: small;
    font-style: italic;
    padding: 2px;
}

table{font-size:12px;}
table tr td{padding:5px;}
input{width:150px;padding:3px;border:1px solid #CCC;}
textarea{width:300px;border:1px solid #CCC;}

</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>名前</td>
    <td><input type="text" id="input1" title="例．売虎太郎" /></td>
  </tr>
  <tr>
    <td>Email</td>
    <td><input type="password"id="input2" title="例．tarou@ultra.m78.man" /></td>
  </tr>
  <tr>
    <td>お問合せ内容</td>
    <td><textarea id="input3"title="例．七とは従兄弟です"></textarea></td>
  </tr>
</table>

<label 


</body>
</html>

	JQUERY

フォームの入力欄に「透かし」、いわゆるウォーターマークを表示するスクリプトです。
入力欄をフォーカスするとAjax的なモーションでウォーターマークが消えます。
入力例などを表示してユーザーのサポートをしてみてはいかがでしょうか。

セッティング

１．ダウンロード/セッティング

英文の解説
http://updatepanel.net/2009/04/17/jquery-watermark-plugin/
英文のチュートリアルが分かる方は上のサイトを開いて確認してください。

jQueryを使用するのでこちらからjQuery（v.1.3.2）をダウンロードしてきてください。
次にjquery.updnWatermark.jsを開いて出てきたコードをjquery.updnWatermark.jsと名づけて保存します。
そしてこの２つのスクリプトをアップロードしてください。

２．<head>の設定

適用するページの<head>にスクリプトを読み込ませます。

パスはアップした場所に合わせて調節してください。
３つめのコードはトリガーです。

次にCSSの設定。

.updnWatermark {
   color: #999;
   font-family: Sans-Serif;
   font-size: small;
   font-style: italic;
   padding: 2px; }　

セレクタを上記のものにすれば内容は自由でOKなので調節してください。
ちなみにウォーターマークは<label>に表示されます。

３．HTMLのマークアップ

ウォーターマークを表示させるには、

と入力します。
表示させたいウォーターマークの内容をtitle属性に書き込み、必ずid属性を各入力欄ごとに付けてください。
つけないと、入力欄をフォーカスするときにイライラします。
textareaも同様にidとtitle属性を忘れずに。
このスクリプトは特にターゲットをしてしなくても、input(text , password)とtextareaにウォーターマークを表示してくれるので便利です。