본문으로 바로가기

워터마크 기능 구현

category Code Lab 2016. 9. 29. 13:25

Watermark



/* watermark on input text */
if(typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, '');
    }
}
var $input_list = $('.ipt-text');
$.each($input_list, function(idx, item){
    var $input_text = $input_list.eq(idx);
    var watermark = $input_text.val();

    $input_text.on('focus blur', function(e){
        var $this 	   = $(this),
            focusValue = $this.val().trim();

        if(e.type == 'focus') {
            if(focusValue == watermark) {
                $this.val('');
            } 
        } else {
            if(focusValue.length == 0) {
                $this.val(watermark);
            }
        }
    })
})

See the Pen gagwZy by jaeheekim (@jaehee) on CodePen.



Jaehee's WebClub