Click here to Skip to main content
12,998,759 members (70,485 online)
Click here to Skip to main content
Add your own
alternative version


10 bookmarked
Posted 22 May 2014

Introducing Textmode in ASP.NET 4.5

, 22 May 2014
Rate this:
Please Sign up or sign in to vote.
This topic for clear description about all types of TextMode behaviour of textbox properties.


A new TextMode property is available in HTML5 ASP.NET 4.5. Microsoft has added lots of new features to Textbox. One of the most interesting things for web developers is the support introduced for new HTML5 form controls. In previous versions of ASP.NET, there were only three properties for the Textmode property of ASP.NET textbox control. The old features for TextMode properties are: MultiLine, Password, and SingleLine. The new features with ASP.NET 4.5 are: Color, Date, DateTime, DateTimeLocal, Mail, Month,

, Range, Search, SingleLine, Time, Url and Week.


The first three TextMode properties (SingleLine, MultiLine, and Password) are almost compatible to all browsers. But remember, all these new options will only work with browsers supporting these HTML5 features (for example: Internet Explorer 10, Chrome, and Opera). For all other browsers (earlier versions of Internet Explorer and Firefox), these textboxes will behave as normal textboxes.

Using TextMode Property in TextBox


This can be used for Color entries. It is very useful on the time of any theme changes. Normally, we kept different types of color boxes to change the theme color dynamically. But it's very simple to pick a color from "Color Picker." Now TextMode is Color and it will view not as texbox in browser but it will view as below picture.

I have tested it in Internet Explorer 10, Chrome, Opera and it's working. Now our intention is to pick color to change the theme. For this, I have added AutoPostBack as true and added code on OnTextChanged event.

 protected void txtColor_TextChanged(object sender, EventArgs e)
   divColor.Attributes.Add("style", "background-color:" + txtColor.Text + "");

Now this is applied to change the div background color. See the impact on the following picture:

Ex. Color Output: #ff8080


Now TextMode is Date and it simply shows one datepicker upon clicking the textbox. This works in Chrome, Opera see the following picture.

Ex. Date Output: 2014-05-16


Datetime option allows the user to select a date and time with time zone. See in opera browser UTC is showing.

In the above picture, the Chrome browser is not working perfectly but it's working in the Opera browser.

Ex. DateTime Output: 2014-05-19T23:55:00Z


DateTimeLocal option allows the user to select a date and time without the time zone.

Ex. DateTimeLocal Output: 2014-05-19T23:55:00


mail code

The email option is used for input fields that should contain an e-mail address.


In this case, this field will validate the wrong e-mail address at the time of submission.


Alternate Text

Month type allows the user to select a month and year without timezone.

Alternate Text

Ex. Month Output: 2014-05



The number option is used for input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted and increase, decrease to number using up and down arrow. See the following figure.




The range option is used for input fields that should contain a value from a range of numbers.


In the range case, we added the txtColor_TextChanged event to get the range output where it is reflecting in a Label text on right side with percentage value. Code was done like below:

protected void txtColor_TextChanged(object sender, EventArgs e)
  divColor.Attributes.Add("style", "background-color:" + txtColor.Text + "");



The search option is used for search fields and behaves like a regular text field. It's working only in Chrome at the time text is entered to see a cross option is coming in textbox.




The time option allows the user to select a time.


Ex. Time Output: 10:44



The Url option is used for input fields that should contain a URL address. The value of the Url field is automatically validated when the form is submitted.




The Week option allows the user to select a week and year without timezone.

Alternate Text


All browsers do not support all the new input types. However, you can already start using them. If they are not supported, they will behave as regular text fields. Three common options are single-line, multiline, or password textbox are supported all types of browser. I have tested with Internet Explorer, Chrome Version 34.0.1847.137, Opera 11.61 and Firefox(3.6 and 29.0.6) browsers.

TextModeNot CompatibleCompatible
ColorIE(6,7,8,9,10), Firefox(Lower Version), SafariChrome, Firefox(Version 29.0.) and Opera
Date IE(6,7,8,9,10), FirefoxChrome, Safari, Opera
DateTimeIE(6,7,8,9,10), Firefox, ChromeSafari, Opera
DateTimeLocalIE(6,7,8,9,10), FirefoxChrome, Safari, Opera
EmailIE(6,7,8,9), Firefox(Lower Version), SafariIE 10,11,Chrome, Firefox(29), Opera
Month IE(6,7,8,9,10), FirefoxChrome, Safari, Opera
MultiLineNULLIE, Chrome, Firefox, Safari, Opera
NumberIE(6,7,8,9,10), FirefoxChrome, Firefox(29), Safari, Opera
Password NULLIE, Chrome, Firefox, Safari, Opera
PhoneIE, Chrome, Firefox, Safari, OperaNULL
RangeIE(6,7,8,9), FirefoxIE 10,11, Chrome, Firefox(29), Safari, Opera
Search IE(6,7,8,9), FirefoxIE 10,11, Chrome, Safari
SingleLineNULLIE, Chrome, Firefox 29, Safari, Opera
TimeIE(6,7,8,9,10), FirefoxChrome, Safari, Opera
UrlIE(6,7,8,9), FirefoxIE 10,11, Chrome, Firefox 29, Opera
Week IE(6,7,8,9,10), FirefoxChrome, Safari, Opera


The ASP.NET 4.5 TextMode property does not support all browser versions. Also, make sure that you are using an HTML5 compliant browser. This means Internet Explorer 10 above or FireFox 29 above, Chrome, Safari, etc.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

You may also be interested in...

Comments and Discussions

GeneralIE 11 Pin
MAGrimsley11-Apr-16 14:07
memberMAGrimsley11-Apr-16 14:07 
QuestionTextbox Solution Pin
sureshparmar523330-Oct-15 15:38
membersureshparmar523330-Oct-15 15:38 
Questioncontrol over the textmode Date Pin
Member 805174114-May-15 17:00
memberMember 805174114-May-15 17:00 
QuestionNot compatible with IE10 Pin
Praveen Kumar Gundu15-Jan-15 12:39
memberPraveen Kumar Gundu15-Jan-15 12:39 
GeneralMy vote of 5 Pin
Moneer Tarabishi7-Jan-15 0:58
memberMoneer Tarabishi7-Jan-15 0:58 
GeneralNice article Pin
Er Atul Sharma13-Jul-14 22:40
memberEr Atul Sharma13-Jul-14 22:40 
GeneralRe: Nice article Pin
sankarsan parida14-Jul-14 1:33
professionalsankarsan parida14-Jul-14 1:33 
Suggestionusing the tooltip like email textmode to validate other form Pin
Member 1066608128-May-14 8:09
memberMember 1066608128-May-14 8:09 
GeneralRe: using the tooltip like email textmode to validate other form Pin
sankarsan parida28-May-14 20:39
professionalsankarsan parida28-May-14 20:39 
GeneralAbt. this article. Pin
Tuhin Sarkar22-May-14 23:54
memberTuhin Sarkar22-May-14 23:54 
GeneralRe: Abt. this article. Pin
sankarsan parida22-May-14 23:56
professionalsankarsan parida22-May-14 23:56 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun22-May-14 21:15
memberHumayun Kabir Mamun22-May-14 21:15 
GeneralRe: My vote of 5 Pin
sankarsan parida22-May-14 21:15
professionalsankarsan parida22-May-14 21:15 
GeneralMy vote of 5 Pin
Sunasara Imdadhusen22-May-14 19:57
professionalSunasara Imdadhusen22-May-14 19:57 
GeneralRe: My vote of 5 Pin
sankarsan parida22-May-14 20:55
professionalsankarsan parida22-May-14 20:55 
GeneralNice Pin
Khurram Arshad22-May-14 19:27
memberKhurram Arshad22-May-14 19:27 
GeneralRe: Nice Pin
sankarsan parida22-May-14 20:54
professionalsankarsan parida22-May-14 20:54 
GeneralRe: Nice Pin
Member 1041690925-May-14 20:43
memberMember 1041690925-May-14 20:43 
GeneralRe: Nice Pin
sankarsan parida25-May-14 20:54
professionalsankarsan parida25-May-14 20:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170622.1 | Last Updated 22 May 2014
Article Copyright 2014 by sankarsan parida
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid