and in KeyDownHandler I check if it is backspace or delete key pressed and do manipulation with textbox text manually so
at the end I have real normal text.
And During editing text in textbox everything is fine but as soon as I get focus on another control .. text changes back (as it was before editing)
What should I do to change the real text in textbox ? Now I am operating with textBox.value property but It seems MaskedEditExtender save this value or something like this.
I found some property in MaskedEditExtender - MaskedEditExtender._LogicTextMask but if I change this .. it works only for particular mask of extender.....
snayko
Member
16 Points
27 Posts
AjaxToolKit MaskedEditExtender backspace and delete in Chrome
Aug 05, 2010 07:52 AM|LINK
Hello,
I have a situation. I know that backspace and delete don't work if we have asp textbox linked with MaskedEditExtender in
Chrome browser(may be other browsers have the same situation)
but I've written some javascript to handle this.
<asp:TextBox .... onKeyDown="KeyDownHandler();"...../>
and in KeyDownHandler I check if it is backspace or delete key pressed and do manipulation with textbox text manually so
at the end I have real normal text.
And During editing text in textbox everything is fine but as soon as I get focus on another control .. text changes back (as it was before editing)
What should I do to change the real text in textbox ? Now I am operating with textBox.value property but It seems MaskedEditExtender save this value or something like this.
I found some property in MaskedEditExtender - MaskedEditExtender._LogicTextMask but if I change this .. it works only for particular mask of extender.....
Song-Tian - ...
All-Star
43705 Points
4304 Posts
Microsoft
Re: AjaxToolKit MaskedEditExtender backspace and delete in Chrome
Aug 09, 2010 07:51 AM|LINK
Hi,
Please add onkeyup="KeyDownHandler();" in the textbox.
Feedback to us
Develop and promote your apps in Windows Store
chrisbhmg
Member
10 Points
5 Posts
Re: AjaxToolKit MaskedEditExtender backspace and delete in Chrome
Jan 04, 2011 12:21 PM|LINK
Hi snayko,
Can you share your KeyDownHandler javascript function?
Thanks!
snayko
Member
16 Points
27 Posts
Re: AjaxToolKit MaskedEditExtender backspace and delete in Chrome
Jan 05, 2011 06:20 AM|LINK
function KeyDownHandler(maskExtenderId) {
if (navigator.appName != "Microsoft Internet Explorer") {
if (event.keyCode == 35 || event.keyCode == 36) { // Home and End buttons functionality
var txtElement = $get(event.srcElement.id);
var txtElementText = GetTextElementValue(event.srcElement.id);
if (event.keyCode == 36) {//Home button
setCaretPosition(txtElement, 0);
}
if (event.keyCode == 35) {//End button
setCaretPosition(txtElement, txtElementText.length);
}
}
if (event.keyCode == 8 || event.keyCode == 46) {
var txtElement = $get(event.srcElement.id);
var txtElementText = GetTextElementValue(event.srcElement.id);
var txtElementCursorPosition = doGetCaretPosition(txtElement);
var maskExtender = $find(maskExtenderId);
var start = txtElement.selectionStart;
var end = txtElement.selectionEnd;
var selectedSymbols = end - start;
if (event.keyCode == 8) //BackSpace
{
if (selectedSymbols > 0) {//if there is selection(more then 1 symbol)
var str1 = txtElementText.substr(0, start);
var str2 = txtElementText.substr(end);
var str = str1 + str2;
if (str.length < txtElementText.length) str = appendStrWithChar(str, txtElementText, "_");
SetTextElementValue(event.srcElement.id, str);
//txtElement.value = str;
maskExtender._LogicTextMask = deletePromptChars(str, "_");
setCaretPosition(txtElement, start);
}
else {
if ((txtElementCursorPosition - 1) >= 0) {
var symbol_to_delete = txtElementText[txtElementCursorPosition - 1];
if (symbol_to_delete == "_") {
setCaretPosition(txtElement, txtElementCursorPosition - 1);
}
else {
var str1 = txtElementText.substr(0, txtElementCursorPosition - 1);
var str2 = txtElementText.substr(txtElementCursorPosition);
var str = str1 + str2;
if (str.length < txtElementText.length) str = appendStrWithChar(str, txtElementText, "_");
SetTextElementValue(event.srcElement.id, str);
//txtElement.value = str;
maskExtender._LogicTextMask = deletePromptChars(str, "_");
setCaretPosition(txtElement, txtElementCursorPosition - 1);
//var real_text = deletePromptChars(str, "_");
}
}
}
}
if (event.keyCode == 46) //Delete
{
if (txtElementCursorPosition >= 0 && txtElementCursorPosition < txtElementText.length
&& ( (selectedSymbols <= 1 && txtElementText[txtElementCursorPosition] != "_") || selectedSymbols > 1) ) {
if (selectedSymbols > 1) {//if there is selection(more then 1 symbol)
var str1 = txtElementText.substr(0, start);
var str2 = txtElementText.substr(end);
var str = str1 + str2;
if (str.length < txtElementText.length) str = appendStrWithChar(str, txtElementText, "_");
SetTextElementValue(event.srcElement.id, str);
//txtElement.value = str;
maskExtender._LogicTextMask = deletePromptChars(str, "_");
setCaretPosition(txtElement, start);
}
else {//no selection or 1 symbol selected
var symbol_to_delete = txtElementText[txtElementCursorPosition];
if (symbol_to_delete != "_") {
var str1 = txtElementText.substr(0, txtElementCursorPosition);
var str2 = txtElementText.substr(txtElementCursorPosition + 1);
var str = str1 + str2;
if (str.length < txtElementText.length) str = appendStrWithChar(str, txtElementText, "_");
SetTextElementValue(event.srcElement.id, str);
//txtElement.value = str;
maskExtender._LogicTextMask = deletePromptChars(str, "_");
setCaretPosition(txtElement, txtElementCursorPosition);
}
}
}
}
}
}
}
snayko
Member
16 Points
27 Posts
Re: AjaxToolKit MaskedEditExtender backspace and delete in Chrome
Jan 05, 2011 06:25 AM|LINK
Additional functions which are used
function GetTextElementValue(elementId) {
var textBox = $get(elementId), text;
if (textBox.AjaxControlToolkitTextBoxWrapper) {
text = textBox.AjaxControlToolkitTextBoxWrapper.get_Value();
}
else {
text = textBox.value;
}
return text;
}
function SetTextElementValue(elementId, someText) {
var textBox = $get(elementId);
if (textBox.AjaxControlToolkitTextBoxWrapper) {
textBox.AjaxControlToolkitTextBoxWrapper.set_Value(someText);
}
else {
textBox.value = someText;
}
}
function appendStrWithChar(str, templateStr, appChar) {
var newStr = str;
var difference = templateStr.length - newStr.length;
if (difference > 0) {
for (i = 0; i < difference; i++) { newStr = newStr + "_"; }
}
return newStr;
}
function deletePromptChars(str, promptChar) {
var newStr = str;
for (i = 0; i < newStr.length; i++) {
if (str[i] == promptChar) {
newStr = newStr.substr(0, i);
return newStr;
}
}
}
function doGetCaretPosition(ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function setCaretPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
<div></div><div>Please mark as answer :)</div>
maxmethot
Member
2 Points
1 Post
Re: AjaxToolKit MaskedEditExtender backspace and delete in Chrome
Jan 08, 2013 07:43 PM|LINK
Okay, I got it to work. I'm using c# in code-behind and the Ajax MaskedEditExtender.
1. Go grab this JavaScript file (you only need the MaskedEditFix.js, not the MaskedEditFix.debug.js):
http://ajaxcontroltoolkit.codeplex.com/Download/AttachmentDownload.ashx?ProjectName=ajaxcontroltoolkit&WorkItemId=26978&FileAttachmentId=491239
2. Add the javascript file to your web application. In the <head> section of my MasterPage, I added this line:
3. Insert this code on the page you want the MaskedTextBox on:
protected void Page_Init(object sender, EventArgs e) { if (!ClientScript.IsStartupScriptRegistered(GetType(), "MaskedEditFix")) { ClientScript.RegisterStartupScript(GetType(), "MaskedEditFix", String.Format("<script type='text/javascript' src='{0}'></script>", Page.ResolveUrl("../Scripts/MaskedEditFix.js"))); } }3. Voila!