问题
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
回答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");
});
回答2:
You can also do this by passing function with onclick event
<a onlick="getColor(this);" color="red">
<script type="text/javascript">
function getColor(el)
{
color = $(el).attr('color');
alert(color);
}
</script>
来源:https://stackoverflow.com/questions/7177512/jquery-get-value-of-custom-attribute