[JS]フォームのフィールドにテキストを表示する軽量スクリプト -autoclear

フォームのテキストフィールドに、入力補助になるテキストを表示し、ユーザーの入力時にそのテキストを消去するjQueryのプラグインを紹介します。

jQuery Plugin: autoclear
デモ

[ad#ad-2]

テキストフィールドに表示されるテキストには、class名を付与し、スタイルシートでカラーなどを設定することもできます。
デモは、「color:gray;」が指定されています。

autoclearの実装

HTML

表示されるテキストは、title属性内のデータを利用します。

<form method="post">
  <label for="name">Name:</label><input type="text" id="name" name="name" title="John Smith" value="<?php echo $_POST&#91;'name'&#93;; ?>" class="autoclear"/>
  <label for="email">Email:</label><input type="text" id="email" name="email" title="your@yourdomain.com" value="<?php echo $_POST&#91;'email'&#93;; ?>" class="autoclear"/>
  <label for="about">About:</label><textarea id="about" name="about" title="Tell us a little bit about yourself..." class="autoclear"><?php echo $_POST&#91;'about'&#93;; ?>
  <input type="submit" value="Submit"/><input type="reset" value="Reset"/>
</form>

CSS

表示されるテキストのスタイルシートを記述します。
※「.default」は変更可能です。

  .default {
    color:gray;
  }

JavaScript

「jquery.js」と「jquery.autoclear.js」を外部ファイルとして、下記のスクリプトを記述します。

$(document).ready(function () {
  $('.autoclear').autoclear();
});

オプションを使用して、class名を設定することも可能です。