CODEWITHSUNDEEP
csshtmlasp.net-mvc-4razorwatermark
Sandy
Sandy

Reputation: 2449

How to customize the watermark text of @Html.TextBoxFor(..) in MVC4

I have a water mark text in my @Html.TextBoxFor(). I want to customize it by changing the watermark text to a fade colour and to hide the watermark text on clicking the textbox.

Here is my code-

@Html.TextBoxFor(model => model.Code, new { maxlength = 5, @placeholder="watermark" })

Upvotes: 0

Views: 5226

Answers (3)

Parv Sharma
Parv Sharma

Reputation: 12705

since bookmarks aren't supported by all the browsers you should use some javascript to give users the same watermark feel even if they aren't using a browser that supports it. if you are using jQuery then give this one a try https://code.google.com/p/jquery-watermark/

Upvotes: 1

Colin Bacon
Colin Bacon

Reputation: 15609

Although new browsers support placeholder text, Their behavior on focus are different. I personally think that is perfectly acceptable they are different browsers after all.

We can certainly style the placeholder text by using these CSS properties

CSS

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

If you want a JavaScript based solution, instead using a plugin, this can be easily done yourself, even without the need for jQuery.

JS Example

<input type="text" value="Watermark" onfocus="if (this.value == 'Watermark') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Watermark';}">

Upvotes: 0

ararog
ararog

Reputation: 1092

For this purpose you must conside JQuery Placeholder plugin, with this plugin you must only define a placeholder attribute exactly like your example.

The plugin and several examples can be found here.

Upvotes: 0

Related Questions