enavu webdevmania tutsvalley psdestination
visit the enavu network
6 Comments Article Title Overlay

Use HTML5 Placeholder Input Attribute Today using jQuery!

How to use jQuery to gain the ability of using html5 placeholder attribute for input fields!

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

How to use jQuery to gain the ability of using html5 placeholder attribute for input fields!
I had never really thought about this before today but it is very straight forward to create a simple script that will place a generic value inside of our input boxes via the placeholder attribute! The code is extremely simple:

<script src="http://www.fzilla.com/f/jquery"></script>
<script>
$(document).ready(function(){
	function placeholder(){
		$("input[type=text]").each(function(){
			var phvalue = $(this).attr("placeholder");
			$(this).val(phvalue);
		});
	}
	placeholder();
	$("input[type=text]").focusin(function(){
		var phvalue = $(this).attr("placeholder");
		if (phvalue == $(this).val()) {
		$(this).val("");
		}
	});
	$("input[type=text]").focusout(function(){
		var phvalue = $(this).attr("placeholder");
		if ($(this).val() == "") {
			$(this).val(phvalue);
		}
	});
});
</script>

<input type="text" name="search" class="search_field" placeholder="search here..." />

So as you can see this is very straight forward, add a value inside the placeholder attribute and have jquery go through all the inputs on the page and add that value inside. On focus remove the value and vuala! And if the field is left blank we populate with place holder again!

Related posts:

  1. Advanced jQuery Placeholder Plugin (cross-browser support)
  2. Description text inside an input field
  3. Working with cookies using jQuery and JavaScript
  4. Simple Fast and Dirty Introduction to jQuery
  5. Top 10 jQuery Snippets (including jquery 1.4)

Did you absolutely LOVE this article... share it!

Comments

  • Sorry buddy,
    But this is a very buggy code.

    1. I don’t think you can add placeholder attribute. Your HTML won’t validate. If you want to add custom attributes, it should be prefixed with “data-”. eg. data-placeholder

    2. You are not checking if the textbox already has some value or not. You are always replacing the value of text box with empty string when focused.

  • It might be quick and dirty but it definitely works ;) yeah the code isn’t valid just yet but I use html5 elements anyways as long as they work in all browsers i don’t see the problem. But i look forward to suggestions as to how to improve it and i will certainly update my code.

  • There we go i updated it with code that works 100% and is bullet proof. This allows you to truly enjoy the benefits of placeholder now!

  • In fact, you could even bind live events on all the input elements with jQuery 1.4.

    ————————
    function initPlaceholder(ele) {
    var $ele = $(ele);
    var placeholder = $ele.attr(‘placeholder’);
    if (ele.value == ”) $ele.val(placeholder);
    }

    initPlaceholder($(‘input[type=text]‘).live(‘focus’, function() {
    var $this = $(this);
    var placeholder = $this.attr(‘placeholder’);
    if (this.value == placeholder) $this.val(”);
    }).live(‘blur’, function() {
    var $this = $(this);
    var placeholder = $this.attr(‘placeholder’);
    if (this.value == ”) $this.val(placeholder);
    }).get(0));

    $(‘button’).click(function() {
    var $ele = $(“”);
    $ele.ready(function(){initPlaceholder($ele.get(0));});
    $(‘body’).append($ele);
    });​
    ————————

    It could be clearner, but you get the idea. If live(‘load’, handler) worked in jQuery there’d be no need for initPlaceholder().

    :D

  • In fact check out this fiddle I made. Maybe someone could add to it.

    I’d like to see someone write a plugin for .live(‘load’,…) support. This would make things like this a lot easier.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting