入力フィールドに透かしテキスト効果を実装する方法を示す簡単な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>
結果。
