Add Watermark to Password Field
In this tutorial, I will teach you how to use watermark on a password field. jQuery1.5.3 has the watermark feature. Ordinarily, a textbox shows hidden characters. But in this tutorial, I will show you how you can watermark a password field. Happy Reading... But don't forget to comment, it can really encourage me.<html>
<head>
<title>Watermark Password Field like twitter - By Ohwofosirai Desmond</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtWaterMark").show();
$("#txtWaterMark").addClass("waterMark");
$("#txtWaterMark").val("Enter Password");
$("#PasswordTXT").hide();
$("#txtWaterMark").focus(function () {
$(this).hide();
$("#PasswordTXT").show();
$("#PasswordTXT").focus();
});
$("#PasswordTXT").blur(function () {
if ($(this).val() == "") {
$("#PasswordTXT").hide();
$("#txtWaterMark").show();
}
});
});
</script>
<style type="text/css">
.waterMark{
color : #CCC;
}
input{
border:#333 1px solid; height:2em; outline:none;
}
</style>
</head>
<body>
<form>
<div>
<input type="password" id="PasswordTXT" TextMode="Password">
<input type="text" id="txtWaterMark" />
</div>
</form>
</body>
</html>
Password Field Watermarking, Show default password text
0 comments:
Post a Comment
Leave a comment