Introduction
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,
Number, Range, Search, SingleLine, Time, Url and Week.
Compatibility
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
Color
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
Date
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
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
DateTimeLocal option allows the user to select a date and time without the time zone.
Ex. DateTimeLocal Output: 2014-05-19T23:55:00
Email
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.
Month
Month type allows the user to select a month and year without timezone.
Ex. Month Output: 2014-05
Number
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.
Range
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 + "");
}
Search
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.
Time
The time option allows the user to select a time.
Ex. Time Output: 10:44
Url
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.
Week
The Week option allows the user to select a week and year without timezone.
History
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.
| TextMode |
Not Compatible |
Compatible |
Color |
IE(6,7,8,9,10), Firefox(Lower Version), Safari |
Chrome, Firefox(Version 29.0.) and Opera |
Date |
IE(6,7,8,9,10), Firefox |
Chrome, Safari, Opera |
DateTime |
IE(6,7,8,9,10), Firefox, Chrome |
Safari, Opera |
DateTimeLocal |
IE(6,7,8,9,10), Firefox |
Chrome, Safari, Opera |
Email |
IE(6,7,8,9), Firefox(Lower Version), Safari |
IE 10,11,Chrome, Firefox(29), Opera |
Month |
IE(6,7,8,9,10), Firefox |
Chrome, Safari, Opera |
MultiLine |
NULL |
IE, Chrome, Firefox, Safari, Opera |
Number |
IE(6,7,8,9,10), Firefox |
Chrome, Firefox(29), Safari, Opera |
Password |
NULL |
IE, Chrome, Firefox, Safari, Opera |
Phone |
IE, Chrome, Firefox, Safari, Opera |
NULL |
Range |
IE(6,7,8,9), Firefox |
IE 10,11, Chrome, Firefox(29), Safari, Opera |
Search |
IE(6,7,8,9), Firefox |
IE 10,11, Chrome, Safari |
SingleLine |
NULL |
IE, Chrome, Firefox 29, Safari, Opera |
Time |
IE(6,7,8,9,10), Firefox |
Chrome, Safari, Opera |
Url |
IE(6,7,8,9), Firefox |
IE 10,11, Chrome, Firefox 29, Opera |
Week |
IE(6,7,8,9,10), Firefox |
Chrome, Safari, Opera |
Conclusion
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.
