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 (1кб)

Related