The following code works just fine in IE, FF, Chrome and Safari, but I am wondering how efficient it actually is when scaled to a lot of users and whether it is accessible to screen readers/special needs users/etc? Specifically, is there a better way to write the jQuery so it uses less $(this) references, and does that even cause any performance hit to use? Also, would setting the display to none on the labels limit the accessibility to people using screen readers? I add in the title attribute when the page is loaded for this purpose, but does that even help/is it a good idea? Also, I am aware that if javascript is disabled all this would be useless, but just wondering here.
<html>
<head>
<title></title>
<style type="text/css">
fieldset {
border: none;
padding: 10px;
width: 600px;
margin-top: 5px;
}
label {
display: none;
}
input {
width: 150px;
margin: 5px;
float: left;
display: block;
}
br {
clear: both;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
GetInputLabels();
$("input").focus(function() {
if ($(this).val() == $(this).prev("label").text()) {
$(this).val('').css("color", "#000");
}
});
$("input").blur(function() {
if ($(this).val() == '') {
$(this).val($(this).prev("label").text()).css("color", "#bbb");
}
});
function GetInputLabels() {
$("input").each(function() {
var label = $(this).prev("label").text();
$(this).val(label).css("color", "#bbb").attr("title", label);
});
}
});
</script>
</head>
<body>
<form>
<fieldset>
<label for="fname">First Name</label>
<input id="fname" type="text" /> <br/>
<label for="lname">Last Name</label>
<input id="lname" type="text" /> <br/>
<label for="email">Email</label>
<input id="email" type="text" /> <br/>
</fieldset>
</form>
</body>
</html>