53

html5 supports the placeholder attribute on input[type=text] elements, but I need to handle non-compliant browsers. I know there are a thousand plugins out there for placeholder but I'd like to create the 1001st.

I am able to get a handle on the input[placeholder] element but trying to get the value of the placeholder attribute is returning undefined - $("input[placeholder]").attr("placeholder").

I'm using jquery 1.6.2.

Here is the jsfiddle. I modified the code to work in a browser that is html5 compatible just for testing purposes.

html 

<input type="text" name="email" size="10" placeholder="EMAIL ADDRESS">

jquery

function SupportsInputPlaceholder() {
    var i = document.createElement("input");
    return "placeholder" in i;
}

$(document).ready(function(){
    if(!SupportsInputPlaceholder()) {
        //set initial value to placeholder attribute
        $("input[placeholder]").val($("input[placeholder]").attr("placeholder"));

        //create event handlers for focus and blur
        $("input[placeholder]").focus(function() {
            if($(this).val() == $(this).attr("placeholder")) {
                $(this).val("");
            }
        }).blur(function() {
            if($(this).val() == "") {
                $(this).val($(this).attr("placeholder"));
            }
        });
    }
});

Thanks for any and all help, B

bflemi3
  • 6,311
  • 19
  • 75
  • 144

2 Answers2

68

You need some form of iteration here, as val (except when called with a function) only works on the first element:

$("input[placeholder]").val($("input[placeholder]").attr("placeholder"));

should be:

$("input[placeholder]").each( function () {
    $(this).val( $(this).attr("placeholder") );
});

or 

$("input[placeholder]").val(function() {
    return $(this).attr("placeholder");
});
Dennis
  • 30,518
  • 9
  • 59
  • 75
  • 2
    Wouldn't `$("input[placeholder]").val(function() { return $(this).attr("placeholder"); });` be better? – Richard Dalton Aug 24 '11 at 14:59
  • Thanks Dennis. when i set a breakpoint on each i found that it's not even entering the function, like it's not finding any elements that match that selector. But when I put a watch on $("input[placeholder]").val() I see "" and if I give the element an initial value I'll see the value. – bflemi3 Aug 24 '11 at 15:23
  • @Richard Yeah, that's a bit better. Probably not too much difference thought. bflemi3, What browser are you using? Your code works in Chrome and IE7 – Dennis Aug 24 '11 at 15:27
  • I'm using firefox 5 and I've commented out the if statement that checks if the browser supports the placeholder attribute since firefox 5 supports html5. – bflemi3 Aug 24 '11 at 17:38
  • I can't reproduce the problem. The code you have provided works fine. Can you make a jsfiddle/jsbin that shows it? – Dennis Aug 24 '11 at 17:54
  • here is the [jsfiddle](http://jsfiddle.net/mkYCN/1/). I commented out the if statement that checks to see if browser is compatible with html5 and changed the placeholder attribute to pholder for testing purposes. – bflemi3 Aug 24 '11 at 19:58
  • If you change the framework to jQuery instead of Mootools, it works in FF5, IE7 and Chrome. – Dennis Aug 24 '11 at 20:27
  • you're right, now I'm even more confused, cause it's not working for on my local vm. Thanks for your help Dennis. – bflemi3 Aug 24 '11 at 20:40
  • @Dennis let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/2821/discussion-between-bflemi3-and-dennis) – bflemi3 Aug 24 '11 at 20:53
10

You can also do this by passing function with onclick event

<a onclick="getColor(this);" color="red">

<script type="text/javascript">

function getColor(el)
{
     color = $(el).attr('color');
     alert(color);
}

</script>
Prince Patel
  • 2,442
  • 1
  • 19
  • 26