Introducing Textmode in ASP.NET 4.5

• Download source - 1.7 KB

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.