フォーム入力 （ウォーターマーク又はプレースホルダ）
入力画面でよく見るようになった入力者サポートのためのTipsです。
ウォーターマークとは薄い透かしです。身近なのとしてテレビで右上に局ロゴなどが薄く表示されますが、
あれです。テレビのは主に著作権保護の観点から付けられていますが、このフォームの場合は例をウォーターマークとして表示して入力者をサポートするために使われることが多いです。
この機能はプレースホルダと呼ばれもします。また、input promptと表記しているものもあります。
・jQuery
画面右手のDownloadボタンからダウンロードします。
・jquery.updnWatermark.js
上記のリンク先をコピーしてファイルに保存します。
上記二つを任意の位置に保存して以下のコードを記入します。
＞＞
さて上記のは例ですが、こちらを手軽に実行するためにjQueryライブラリを取得します。
まず取得先です。・jQuery
画面右手のDownloadボタンからダウンロードします。
・jquery.updnWatermark.js
上記のリンク先をコピーしてファイルに保存します。
上記二つを任意の位置に保存して以下のコードを記入します。
<html>
<head></head>
<style type="text/css">
.updnWatermark {color:#888888;}
</style>
<script type="text/javascript" src="/library/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/library/js/jquery.updnWatermark.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$.updnWatermark.attachAll();
});
</script>
<body>
<input type="text" name="in2" title="例：こんなぐあい" style="width:200px">
</body>
</html>
以下、表示例です
title要素に指定された文字列が透かしとして表示されます。 また、この透かしはtextfieldだけでなくtextarea、passwordにも適用が可能です。
2009年 7月 3日ドキュメント作成
2009年 7月 3日ドキュメント更新