jquery: get value of custom attribute

Question

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

Answer 1

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"); }); 

Answer 2

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>