TOC

jQuery - テキスト入力に対するウォーターマーク効果

jQuery –テキスト入力に対する透かし効果

入力フィールドに透かしテキスト効果を実装する方法を示す簡単なjQueryの例。

1. コードスニペット

電子メール入力フィールドとcss透かしクラス。

電子メールフィールドに透かし効果を適用する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');
        }
    });
});

2. Demo

完全なHTMLソースコード。 



jQuery and watermark example











jQuery - Watermark on input text

結果。

ソースコードをダウンロード

ダウンロード–jQuery-watermark-input.zip（1kb）

Related