[JS]placeholderのテキストにアニメーション効果を追加できるスクリプトPlaceholdem

Javascriptスニペット

2013.11.15

<input type=text>や<extarea>でplaceholderのテキストにアニメーション効果を追加できるPlaceholdemのご紹介です。

jQuery不要で簡単に使うことができますので、企業向けのお問い合わせフォームなどにも使えるのではないかと思います。

Placeholdem のダウンロード
Placeholdem の設置
フォームの記述例

Placeholdem のダウンロード

以下のページよりPlaceholdemのファイルをダウンロードします。
Placeholdem

Placeholdem の設置

ダウンロードしたplaceholdem.min.jsファイルを<head>内などに設置します。

<head>
<script type="text/javascript" src="placeholdem.min.js"></script>
</head>

<head>

</head>

フォームの記述例

続いてHTML側のフォームの記述例です。

<form>
<label>お名前</label>
<input type="text" placeholder="（例）山田太郎">

<label>メールアドレス</label>
<input type="email" placeholder="（例）sample@sample.jp">

<label>お電話番号</label>
<input type="tel" placeholder="（例）00-1234-5678">

<label>ご用件</label>
<textarea placeholder="1,000文字以内で入力してください。" rows="10"></textarea>
</form>

<form>

<label>メールアドレス</label>

<label>お電話番号</label>

</form>

あとは、</body>タグ直前に以下のスクリプトを記述します。

<script type="text/javascript">
Placeholdem( document.querySelectorAll( '[placeholder]' ) );
</script>

Placeholdem( document.querySelectorAll( '[placeholder]' ) );

</script>

<input type=text>の他、<input type=email>や<nput type=tel>にもアニメーション効果付きのplaceholderを適用させたデモは↓こちらです。

placeholderのテキストにアニメーション効果するデモ