placeholder

by narensrinivasans

HTML

<!-- div used as html tag -->
<div class="html lt-ie10">
    <p><input type="text" name="lname" id="lname" placeholder="some text 1 some text 2 some times goes bigger"/></p>
    <p><input type="text" name="fname" id="fname" placeholder="some text 2 some text 2 some times goes bigger"/></p>
    <p><textarea id="ta" placeholder="some text 2 some times goes bigger"></textarea></p>
</div>

CSS

#lname {
    padding: 10px;
    font-size: 13px;
}
#fname {
    padding: 10px 12px;
    font-size: 22px;
}
#ta {
    padding: 10px;
    font-size: 16px;
}
.mPlaceholder {
    top: 5px;
    left: 5px;
}

JavaScript

// Test done for IE. Use modernizer in html tag. Remove '.' in html selector

$(':text, textarea').each(function() {
    var placeholder_text = $(this).attr('placeholder');
    var widthV = $(this).width(); 
    var heightV = $(this).height(); 
    
    if($('.html').hasClass('lt-ie10')) {
        $('<label class="mPlaceholder" style="position: absolute; color: #999;height:'+heightV+'px; width: '+widthV+'px; word-wrap: break-word; display: block; overflow: hidden;">'+placeholder_text+'</label>').insertBefore($(this));
        $(this).parent().css('position', 'relative');
    }
});

$(':text, textarea').on('focus', function(){
    if($('.html').hasClass('lt-ie10')) {
        $(this).prev().hide();
    }
}).on('blur', function(){
    if($('.html').hasClass('lt-ie10')) {
        if (this.value == '' ) {
        $(this).prev().show();
        }
    }
});

$('.mPlaceholder').click(function(){
    $(this).next().focus();
    $(this).hide();
});