I’ve revisited this post here – Revisiting HTML5 placeholder fixes I recommend you check that update out.
One of the nifty new features of HTML5 is the placeholder for forms which is added by putting in a placeholder value.
So I can use this everywhere I’ve just written a quick bit of jQuery to replicate the placeholder functionality in browser that don’t support. It also uses Modernizr to check if the browser already supports the placeholder technique.
To use this make sure you’ve included the jQuery and Modernizr files and then pop in the bit of code below or download and include the file.
(This is only tested so far with Modernizr v1.1 and jQuery v1.4.2)
[download id=”9″]
$(document).ready(function() {
if(!Modernizr.input.placeholder){
$("input").each(function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
});
$(this).blur(function(){
if($(this).val()=="") $(this).val($(this).attr("placeholder"));
});
}
});
}
});
gr8 information
Thanks for code
Without jQuery:
function initInputPlaceholders() {
function onFocus() {
if(this.value == this.getAttribute(‘placeholder’)) {
this.value = ”;
}
}
function onBlur() {
if(this.value == ”) {
this.value = this.getAttribute(‘placeholder’);
}
}
var inputs = document.getElementsByTagName(‘input’)
, i, l = inputs.length
, input;
for(i = 0; i < l; i += 1) {
input = inputs[i];
if(input.value == '' && input.hasAttribute('placeholder')) {
input.value = input.getAttribute('placeholder');
input.addEventListener('focus', onFocus, false);
input.addEventListener('blur', onBlur, false);
}
}
}
just call the function on load or on domready
note: does not work in IE
This works better since it handles clearing the placeholder on submit
$(document).ready(function() {
if (Modernizr.input.placeholder)
return;
$(‘input[placeholder]’).focus(function() {
if ($(this).hasClass(‘placeholder’)) {
if ($(this).val() == $(this).attr(‘placeholder’))
$(this).val(”);
$(this).removeClass(‘placeholder’);
}
});
$(‘input[placeholder]’).keypress(function() {
if ($(this).hasClass(‘placeholder’)) {
if ($(this).val() == $(this).attr(‘placeholder’))
$(this).val(”);
$(this).removeClass(‘placeholder’);
}
});
$(‘input[placeholder]’).blur(function() {
if ($(this).val() != ”)
return;
$(this).addClass(‘placeholder’);
$(this).val($(this).attr(‘placeholder’));
});
$(‘input[placeholder]’).each(function() {
if ($(this).val() != ” && $(this).val() != $(this).attr(‘placeholder’))
return;
$(this).val($(this).attr(‘placeholder’)).addClass(‘placeholder’);
});
$(‘form’).submit(function() {
$(this).find(“.placeholder”).each(function() {
$(this).removeClass(‘placeholder’);
$(this).val(”);
});
});
});
if(this.value == this.getAttribute(‘placeholder’)) {
this.value = ”;
}
}
function onBlur() {
if(this.value == ”) {
this.value = this.getAttribute(‘placeholder’);
I’m sorry to have to say so, but this is a really bad way to implement the PLACEHOLDER attribute in older browsers, because messing around with the VALUE attribute has a significant negative impact on accessibility, and doesn’t work when JS is disabled (no hint/label will be shown at all). Instead of using the VALUE attribute you should use a LABEL element (which has semantic value and is correctly interpreted by assistive technologies) and use JS to float it over the top of the field.
There are plenty of jQuery plugins already in existence which implement support for PLACEHOLDER in older browsers – see http://plugins.jquery.com/plugin-tags/placeholder – BUT only one uses the accessible, semantic, and JS-proof approach that I describe above, the rest use the VALUE approach, which is why you should always read & understand what a plugin does before you use it.
My personal recommendation is https://github.com/davist11/In-Field-Labels-jQuery-Plugin which is discussed in detail by the author in his article http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/ – please read it!
Marcus, thanks for the comment and the links. The above code was something I wrote a while back as a quick fix for a placeholder. I think you’re correct the idea of putting the placeholder text into a label and floating it may well be a good idea where a label is not present.
However it was initially put to use on forms where there was a label connected and I think that using the value is perfectly acceptable, why? Because the placeholder shouldn’t be used to indicate what a field is, e.g. email, phone number etc a placeholder should be used to show an example of the format of an input. Therefore even in the absence of javascript you should have the label in place to indicate what the field is. Taking your comments into account though it may be better to use a half way house and simply put the placeholder into a span or similar and float that over the input.
Yes, where there is already a label present (and there should be) then a non-functional SPAN floated over the field would do the job nicely, the code I linked to could easily be modified accordingly.
I write a jquery plugin to solve this problem.. its free..
http://plugins.jquery.com/project/kegles-jquery-placeholder
http://www.kegles.com.br/jquery-placeholder/
Thanks!
Thank u (:
original code with some optimalizations:
$(“input[placeholder]”).each(function () {
var $this = $(this);
if($this.val() == “”){
$this
.val($this.attr(“placeholder”))
.focus(function(){
if($this.val() == $this.attr(“placeholder”)) {
$this.val(“”);
}
})
.blur(function(){
if($this.val() == “”) {
$this.val($this.attr(“placeholder”));
}
});
}
});
When using any of these techniques with IE9 I find that the first input in the page doesn’t display the placeholded text until I click into it, and then click out of it.
Is IE9 auto setting focus to the first input field?
Thanks for the placeholder fix. It’s working great on a site I maintain! Awesome looking website, by the way.
This code is fine for simple use, but it doesn’t do a very good job of properly polyfilling the native placeholder attribute.
The placeholder text will be submitted along with the form if the user doesn’t enter a value. It will attempt to work on input types that don’t support placeholders. It doesn’t allow for the new style of placeholder that hides on input, rather than on focus. It won’t work “live” – if you add a placeholder or change the placeholder value dynamically, it won’t work.
Placeholders.js (https://github.com/jamesallardice/Placeholders.js) is an attempt to produce a proper placeholder attribute polyfill, which overcomes all of the problems listed above.
Try this
<script>
(function($){
$.fn.extend({
placeHOLD: function(options) {
return this.each(function() {
var o = options;
var obj = $(this);
$val = obj.attr(“placeholder”);
if ($val!=”){
obj.attr(“pattern”,$val);
$val = $(this).attr(“pattern”);
obj.attr(“placeholder”,”);
obj.val($val);
obj.live(“click”,function(){$comp=obj.attr(“pattern”);$comp2=$(this).attr(“pattern”);if(obj.val()==$comp){obj.val(“”)}})
obj.live(“blur”,function(){$comp=obj.attr(“pattern”);if(obj.val()==”){obj.val($comp)}})
}
});
}
});
})(jQuery);
</script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘input[type=text],textarea’).placeHOLD();
});
</script>
I’ve tried many of these. but, none of them worked for me. I wrote my own here, in case someone is in a similar situation: http://www.sciencestudioz.com/input-element-placeholder-attribute-in-ie/
This is what which I need::