[JS]フォームの入力欄にテキストを表示するスクリプト -Textbox Hinter

設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。
表示するテキストにはclassを付与できます（Demo 3参照）。

jQuery Textbox Hinter Plugin
デモページ

主な特長

• シンプルで軽量
• スクリプトの知識は不要
• 表示するテキストにclassを付与できる
• textareaにもテキスト表示が可
• クロスブラウザ対応
• カスタマイズが簡単

デモと実装方法

実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。

テキストボックスにテキストを表示します。

HTML: Demo 1

<input type="text" class="demo1" size="70" />

JavaScript: Demo 1

表示するテキストを記述します。

$('.demo1').tbHinter({
	text: 'A hint for this textbox'
});

テキストボックスにclassを与えたテキストを表示します。

HTML: Demo 3

<input type="text" class="demo3" size="70" />

JavaScript: Demo 3

表示するテキストを記述し、classを与えます。

$('.demo3').tbHinter({
	text: 'A default class can be added to the hint text like this',
	class: 'greyText'
});

テキストエリアにテキストを表示します。

HTML: Demo 2

<textarea cols="55" rows="7" class="demo2">

JavaScript: Demo 2

表示するテキスト以外にも、classの追加が可能です。

$('.demo2').tbHinter({
	text: 'A hint can be added to a <textarea> also'
});