Ajaxcontroltoolkit Masked Extender Extended

Posted by Mike Dwyer | Filed under

For those who have worked around with the ajaxcontroltoolkit masked edit extender, you most likely have noticed how difficult it is for users to edit text.  For instance, if you are using a date mask, and the user wishes to change the day part of the date, they will generally click to the number they would like to change, delete the number with either del or backspace, then type in the correction.  However, when hitting del or backspace, the character to delete will delete as expected, the remaining text will move to the left as expected, however, when the user types in the new number, the text is overwritten instead of inserted.  Ok, that was a pretty long sentence.  The modified version I have currently adds a new property to allow the developer to put in insert mode.  If insert mode is activated, then when the user types in a character, the text will move to the right as you would expect, instead of overwriting.  I am currently working on a feature to have it automatically select text when you click in the box.  For instance, on a date mask, if you click in the month area, it will select the first 2 characters, or if you click on the year portion, it will select the last 4 allowing you to change the text quickly. 

The code below has one solution with 2 projects.  The web project is really just a default.aspx page with the extender in so you can play around with.  The other project obviously has the code for the custom masked edit extender.  The way to tell the difference between this and the original is when you have the masked box filled in, and cursor over and delete or backspace, you will see this custom handler will move text to the right like most textboxes, compared to the original which overwrites text.  Feel free to take a look and upload and changes and let me know any comments.

customMaskedEditExtender.zip (1.03 mb)

Currently rated 1.7 by 3 people

  • Currently 1.666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5