Description:
Nowadays, the most popular web design trend
is adding watermark effects as instructions with textbox. It is very effective
method to attract the user and increase the website usability.
Adding instruction with textbox fields will
provide user friendly access for the website. We can do this by setting default
text in the input fields. Default text appears when the field is empty.
When the input got focus, the default label
disappears and enabling user to edit the textbox.
If no value is entered, again the default
label will appear.
Watermark effect means, adding default text
to the fields.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.watermarkstyle
{
color: lightgrey;
}
</style>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
var val = "Enter Phone No";
if ($("#txtPhoneNo").val() == "") {
$("#txtPhoneNo").val(val);
}
$("#txtPhoneNo").focus(function () {
if (this.value == val) {
this.value = "";
$("#txtPhoneNo").removeClass("watermarkstyle
");
}
});
$("#txtPhoneNo").blur(function () {
if (this.value == "") {
this.value = val;
$("#txtPhoneNo").addClass("watermarkstyle
");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtPhoneNo" CssClass=" watermarkstyle " runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Watermark input style using Jquery, adding default
label on input fields,Jquery watermark effect on text input, Textbox watermark
effect in asp,net using Jquery, Add default text to textbox using watermark
effect, Textbox watermark effect with default value, Default text label in
textbox using Jquery
No comments:
Post a Comment