Default text in form inputs for old browsers
To support old browser without placeholder
attribute, use this cool trick to set default text in input forms.
If the input box is empty it shows the default text and clears it when the cursor is focused on input. Then it puts the default text back once the cursors leaves without any character entered. This javascript does that
$(document).ready(function() {
/* Default Text */
$('.default-text').live('focus', removeDefaultText);
$('.default-text').live('blur', addDefaultText);
$('.default-text').blur();
});
var addDefaultText = function () {
if ($(this).val() == '') {
$(this).addClass('enabled').val($(this).attr('title'));
}
return false;
};
var removeDefaultText = function () {
if ($(this).attr('title') == $(this).val()) {
$(this).removeClass('enabled').val('');
}
return false;
};
In your form input be sure to add the attributes class="default-text"
and title="your default text here"
Written by Quoc Vu
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Jquery
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#