Blog

Today I came across a form using inline javascript events for placeholders:
[html]
<div class="inputBG" align="center">
<input name="company" id="company" type="text" placeholder="Company Name" onBlur="if (this.value == '') {this.value = 'Company Name';}" onFocus="if (this.value == 'Company Name') {this.value = '';}" />
</div>
[/html]
This is a no-no.
Instead, use this:
HTML
[html]<input id="name" type="text" name="name" placeholder="placeholder name">[/html]
 jQuery
[javascript]
// only necessary for browsers that don't support the placeholder attribute
$(document).ready(function(){
$('input').each(function(i,v){
// set initial values
$(this).val($(this).attr('placeholder'));
});
});
$('input').on({
'click': function(){ // clear the placeholder
if( $(this).val() == $(this).attr('placeholder')){ $(this).val(''); }
},
'blur': function(){ // reset the placeholder
if( $(this).val() == ''){ $(this).val($(this).attr('placeholder')); }
}
});
[/javascript]
And all is good and right in the world.
I'm assuming you have a basic understanding of document structure and how to implement jQuery.
If you have any questions, please ask.

Similar Posts