I have tested the following code across various browsers like IE, FF, Chrome, and Safari, and it seems to work fine. However, I am concerned about its efficiency when scaled to accommodate a large number of users. Additionally, I'm wondering if this code is accessible to screen readers and users with special needs. Is there a more efficient way to write the jQuery without using excessive $(this) references? Would reducing the number of $(this) calls impact performance? Also, will setting the display property to none on the labels affect accessibility for screen reader users? Although I set title attributes during page load for their benefit, I wonder if this practice serves any purpose or is even necessary. Lastly, I acknowledge that all these features would be rendered useless if JavaScript is disabled, but I still want to inquire.
<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>