Posts

Showing posts from December, 2011

HTML Input Place Holder

A Simple way to implement placeholder in a Input Field. Although HTML 5 by default provides placeholders[placeholder attribute], it falls short in Cross Browser Compatibility Construct A Simple Form Username: Let's Implement Placeholders Now [With jQuery] Change the HTML To HTML: Username Result Username Apply CSS and Overlay placeholder over Input Element CSS: .place-holder { position:relative; left:-245px; color:#AAA; z-index:1; } .name-field { width:250px; background:#FFF; z-index:0; } Result Username Handle Focus and Blur Event :) jQuery: $().ready(function () { function hideHolder() { $('.place-holder').hide(); } function showHolder() { if($('.name-field').val() == '') { $('.place-holder').show() } } $('.name-field').focus(hideHolder); $('.name-field').blur(showHolder); $('.place-holder').click(function () { $('.name-field').trigger('focus'); }); });