<input type=text>や<extarea>でplaceholderのテキストにアニメーション効果を追加できるPlaceholdemのご紹介です。
jQuery不要で簡単に使うことができますので、企業向けのお問い合わせフォームなどにも使えるのではないかと思います。
Placeholdem のダウンロード
以下のページよりPlaceholdemのファイルをダウンロードします。Placeholdem
Placeholdem の設置
ダウンロードしたplaceholdem.min.jsファイルを<head>内などに設置します。|
1 2 3 |
<head> <script type="text/javascript" src="placeholdem.min.js"></script> </head> |
フォームの記述例
続いてHTML側のフォームの記述例です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
あとは、</body>タグ直前に以下のスクリプトを記述します。
|
1 2 3 |
<script type="text/javascript"> Placeholdem( document.querySelectorAll( '[placeholder]' ) ); </script> |
<input type=text>の他、<input type=email>や<nput type=tel>にもアニメーション効果付きのplaceholderを適用させたデモは↓こちらです。
placeholderのテキストにアニメーション効果するデモ
コメント