入力フィールドに透かしテキスト効果を実装する方法を示す簡単なjQueryの例です。
1.コードスニペット
電子メール入力フィールドとcss透かしクラス。
<style type="text/css"> input.watermark { color: #999; }//light silver color </style> <label>Email : </lable> <input id="email" type="text"/>
電子メールフィールドに透かし効果を適用するjQuery
$(document).ready(function() { var watermark = 'Puts your email address'; //init, set watermark text and class $('#email').val(watermark).addClass('watermark'); //if blur and no value inside, set watermark text and class again. $('#email').blur(function(){ if ($(this).val().length == 0){ $(this).val(watermark).addClass('watermark'); } }); //if focus and text is watermrk, set it to empty and remove the watermark class $('#email').focus(function(){ if ($(this).val() == watermark){ $(this).val('').removeClass('watermark'); } }); });
デモ
完全なHTMLソースコード。
<html> <head> <title>jQuery and watermark example</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <style type="text/css"> input.watermark { color: #999; } input { padding:4px; text-indent: 5px; width:200px; font-size:14px; } </style> </head> <body> <script type="text/javascript"> $(document).ready(function() { var watermark = 'Puts your email address'; //init, set watermark text and class $('#email').val(watermark).addClass('watermark'); //if blur and no value inside, set watermark text and class again. $('#email').blur(function(){ if ($(this).val().length == 0){ $(this).val(watermark).addClass('watermark'); } }); //if focus and text is watermrk, set it to empty and remove the watermark class $('#email').focus(function(){ if ($(this).val() == watermark){ $(this).val('').removeClass('watermark'); } }); }); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2836379775501347" data-ad-slot="8821506761" data-ad-format="auto" data-ad-region="mkyongregion"></ins> <script> (adsbygoogle = window.adsbygoogle ||[]).push({}); </script><h2>jQuery - Watermark on input text</h2> <label>Email : </lable> <input id="email" type="text"/> </body> </html>
結果。