Click here to Skip to main content
Click here to Skip to main content

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.

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

mail code

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

mail

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

Month

Alternate Text

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

Alternate Text

 Ex. Month Output: 2014-05

Number

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.

number

Range

range

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

range

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

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

Time

timecode

The time option allows the user to select a time.

Time

 Ex. Time Output: 10:44

Url

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.

url

Week

week

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

Alternate Text

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.

License

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

About the Author

sankarsan parida
Software Developer
India India
Hi all,I am Sankarsan Parida,I am working as a Software Engineer in CTS Kolkata. I have around 4 years of experience in developing the web applications. My areas of interest are C#.Net, Ajax, Sql server, MongoDB, MVC, WCF
Follow on   Google+

Comments and Discussions

 
GeneralNice article PinmemberEr Atul Sharma13-Jul-14 22:40 
GeneralRe: Nice article Pinprofessionalsankarsan parida14-Jul-14 1:33 
Suggestionusing the tooltip like email textmode to validate other form PinmemberMember 1066608128-May-14 8:09 
GeneralRe: using the tooltip like email textmode to validate other form Pinprofessionalsankarsan parida28-May-14 20:39 
GeneralAbt. this article. PinmemberTuhin Sarkar22-May-14 23:54 
GeneralRe: Abt. this article. Pinprofessionalsankarsan parida22-May-14 23:56 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun22-May-14 21:15 
GeneralRe: My vote of 5 Pinprofessionalsankarsan parida22-May-14 21:15 
GeneralMy vote of 5 PinpremiumSunasara Imdadhusen22-May-14 19:57 
GeneralRe: My vote of 5 Pinprofessionalsankarsan parida22-May-14 20:55 
GeneralNice PinmemberKhurram Arshad22-May-14 19:27 
GeneralRe: Nice Pinprofessionalsankarsan parida22-May-14 20:54 
GeneralRe: Nice PinmemberMember 1041690925-May-14 20:43 
GeneralRe: Nice Pinprofessionalsankarsan parida25-May-14 20:54 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 22 May 2014
Article Copyright 2014 by sankarsan parida
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid