[JS]placeholderのテキストにアニメーション効果を追加できるスクリプト「Placeholdem」
スポンサード
スポンサード
input type=text やtextarea で、placeholder
のテキストにアニメーション効果を追加できる「Placeholdem」のご紹介です。
jQuery 不要で簡単に設置することができますので、企業向けのお問い合わせフォームなどにも使えるのではないかと思います。
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、input type=tel にもアニメーション効果付きのplaceholder を適用させたデモはこちらです。
placeholderのテキストにアニメーション効果するデモ
スポンサード
コメント