MaskedTextBox - Paste issues with Phone Numbers

[Michael]

I am using this control for Phone numbers and I need a way to strip out the bad characters when Users are copying/pasting from other applications. If the User tries to paste a phone number that
does not match, it screws up the text. Example:
User tries to paste: 480.123. 4567
Result is: (480) _12-3_45 

What I want to do is capture the event and remove, replace, etc.  the offending character(s) such that they can copy and paste some bad formats. Typical formats;
480.123.4567
480/ 123 4567
480/123-4567
480 123 4567
480-123-4567

How can I capture this event? I have read the documents online and experimented with several events but can’t get anything to work. Thank you for your help.

 Michael J. Boles

[Dimo]

Hi Michael,

You can use the OnValueChanging event.

Please refer to the following help articles for relevant information:

RadInput OnValueChanging

RadMaskedTextBox Client-Side Object

RadInput Client-Side Basics

Using RadMaskedTextBox

RadInput - Gettting and Setting Values


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael]

I read all of the linked articles below before I posted and I could not figure out how to capture/replace/modify the pasted string.

• “ClientEvents-OnValueChanging” does not appear to fire for MaskedTextBox.
• The only other event that appears to be useable is; “ClientEvents-OnError”. How do I use this event ? It does not have anything that I can use (that I can figure out). It will tell me what the value is but not allow me to change it.

Is there a way that during a paste operation, I can remove any non-numeric characters such that Users can copy in phone numbers from other sources? Can I capture the paster operation, clean it, and then apply it to the control? Thank you.

Michael J. Boles.

[Dimo]

Hi Michael,

You are right, the OnValueChanging event handler is not supported for MaskedTextBox, sorry for the misleading information. OnError is not intended to be used in such cases either, so try implementing a solution similar to the demo here:

http://msdn.microsoft.com/en-us/library/ms536955(VS.85).aspx

You can subscribe to onpaste like this:

<telerik:RadMaskedTextBox  onpaste="OnPaste()"  />

<script type="text/javascript">
    function OnPaste()
    {
        // .........
    }
</script>


Alternatively, you can modify the mask or the source from where the phone numbers is copied, if possible.


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael]

Thank you for the reply. That is exactly what I was looking for! I actually used the "onbeforepaste" event. Below is the code that I implemented....

• Users are restricted to a US Phone format with no extension.
• If they copy/paste data from another source, anything that is not a number is stripped out prior to pasting.

Thank you again.

ASPX (control is in a radGrid):
<

telerik:RadMaskedTextBox ID="rmtbBLPhone" runat="server" 
SelectionOnFocus="SelectAll" Mask="(###) ###-####"
TextWithLiterals='<%# Bind("BLPhone") %>' onbeforepaste="TlrkMaskUSPhoneBP_MN()" >
</telerik:RadMaskedTextBox>

<asp:RegularExpressionValidator ID="rev1" runat="server" ControlToValidate="rmtbBLPhone" ErrorMessage="*"
ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" ValidationGroup="vgContact">
</asp:RegularExpressionValidator>

JS:
function TlrkMaskUSPhoneBP_MN()
{ 
    // Before pasting into the control, strip out everything that is not a number.
    event.returnValue = false;
    var sNewString = window.clipboardData.getData("Text", sNewString);
    sNewString = sNewString.replace(/\D/g, "");
    window.clipboardData.setData("Text", sNewString);
}

[Steve Y]

Hi Michael,

I too am having the same problem as you and I was very happy to find this post with the code you used.

So I copied the javascript into my sources and went to make the modification to the control and add 'onbeforepaste="javascript function call" and I could not find the onbeforepaste or even an onpaste client side event. They are not in the properties of the RadMaskedTextBox control and don't appear in the intellisense as valid events.

What am I missing? I'm using latest asp.net ajax controls version 2008.02.0915.35

Thanks in advance, Steve

[Michael]

Steve,

It won't show in the Intellisense for the RadMaskedTextBox (RMTB)  control, but they are valid events. If you add a plain HTML input control they show up there;

<input id="Text1" type="text" onbeforepaste="[FuncName]" onpaste="[FuncName]" />

Ultimately, the RMTB gets drawn as an INPUT control which is why the “onbeforepaste” works.

……..<span id="RadMaskedTextBox1_wrapper" class="radInput_Default" style="white-space:nowrap;">
<input type="text" size="20" value="(___) ___-____" id="RadMaskedTextBox1……….

I did not receive any build errors or have any “issues” adding it to the RMTB. Basically (IMO) it is a supported but unlisted attribute. I don’t know enough about the control to explain it any better than that IE: I don't know why it allows you to add this call to the RMTB without first adding it as an "attribute"  I suppose if you want/need to be more specific in your code, you could add the reference in the code-behind but that just seems like extra work to me.

protected void Page_Load(object sender, EventArgs e)
{
   RadMaskedTextBox1.Attributes.Add("onbeforepaste", "bp");
}

 Hope that helps!

Michael J. Boles

[Steve Y]

Hi Michael,

Thanks for the clarification and for your help. It works perfectly - I guess I just needed a little faith on this one...

Regards,
Steve