What is the easiest way to implement watermark textbox control in ASP.NET MVC, are there any such controls on the internet (codeplex maybe). I suppose it is quite simple to write one extending HtmlHelper and using jquery watermark textbox implementation.
Add a comment
|
6 Answers
You could use a Jquery plugin like the following:
There is a sample provided and is simple to use.
2 Comments
Wil
Stick with JQuery over AJAX Control
Matthew Dresser
That link is broken. I believe the correct link is plugins.jquery.com/watermark
I would use this one: http://digitalbush.com/projects/watermark-input-plugin/
2 Comments
Matthew Dresser
This plugin doesn't fit so well with validation plugins unfortunately as it works by setting the value of the input control, whereas the one for the accepted answer creates an overlay span.
camainc
Thanks mdresser. I'll have a look at that one.
Use the TypedTextBox of my Mvc Controls toolkit here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=TypedTextBox
answered May 2, 2011 at 17:42
Francesco Abbruzzese
4,1491 gold badge20 silver badges18 bronze badges
Comments
I use and recommend ClearField jQuery plugin: http://labs.thesedays.com/projects/jquery/clearfield/
It's very simple to use as shown here (copied & pasted from link above):
Put this in your HTML pages header:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.clearfield.js"></script>
Add this function somewhere on the page:
$(document).ready(function() {
$('.clearField').clearField();
});
Your input field might look like this:
<input type="text" class="clearField" value="What's your name?" />
If you were using with ASP.NET (not MVC), you'd possibly be using an ASP control like this:
<asp:TextBox ID="Search" runat="server" CssClass="clearField">Search Something</asp:TextBox>
For the part where it say's "Add this function somewhere on the page", you'd want to make sure it's within script tags like this:
<script type="text/javascript">
$(document).ready(function () {
$('.clearField').clearField();
});
</script>
Comments
Check my ans here
with this jquery you can show watermark on your text box .Here I am using an image in place of watermark.You need to create an image of the watermark text.
$(document).ready(function () {
/*Watermark for date fields*/
if ($("#dob").val() == "") {
$("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
}
$("#dob").focus(function () {
if (watermark == 'MM/DD/YYYY') {
$("#dob").css("background-image", "none");
$("#dob").css("background-color", "#fff");
}
}).blur(function () {
if (this.value == "") {
$("#dob").css("background", "#ebebeb url('/Content/images/DateWaterMark.png') no-repeat 1px 0px");
}
});
$("#dob").change(function () {
if (this.value.length > 0) {
$("#dob").css("background", "#fff");
}
});
}
Comments
You can probably use the AJAX Control Tookkit Watermark control.
