[JS]フォームの入力欄にテキストを表示するスクリプト -Textbox Hinter
Post on:2010年8月10日
sponsors
設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。
表示するテキストにはclassを付与できます（Demo 3参照）。
jQuery Textbox Hinter Plugin
デモページ
主な特長
- シンプルで軽量
- スクリプトの知識は不要
- 表示するテキストにclassを付与できる
- textareaにもテキスト表示が可
- クロスブラウザ対応
- カスタマイズが簡単
デモと実装方法
実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。
テキストボックスにテキストを表示します。
HTML: Demo 1
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <input type="text" class="demo1" size="70" /> </textarea> |
JavaScript: Demo 1
表示するテキストを記述します。
|
1 2 3 4 5 |
<textarea name="code" class="js" cols="60" rows="5"> $('.demo1').tbHinter({ text: 'A hint for this textbox' }); </textarea> |
テキストボックスにclassを与えたテキストを表示します。
HTML: Demo 3
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <input type="text" class="demo3" size="70" /> </textarea> |
JavaScript: Demo 3
表示するテキストを記述し、classを与えます。
|
1 2 3 4 5 6 |
<textarea name="code" class="js" cols="60" rows="5"> $('.demo3').tbHinter({ text: 'A default class can be added to the hint text like this', class: 'greyText' }); </textarea> |
テキストエリアにテキストを表示します。
HTML: Demo 2
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <textarea cols="55" rows="7" class="demo2"></textarea> </textarea> |
JavaScript: Demo 2
表示するテキスト以外にも、classの追加が可能です。
|
1 2 3 4 5 |
<textarea name="code" class="js" cols="60" rows="5"> $('.demo2').tbHinter({ text: 'A hint can be added to a <textarea> also' }); </textarea> |
sponsors
