RadMaskedTextBox - How to input values in the middle of the mask?

[Daniel]

Hi, 

I'm experiencing some issues with RadMaskedTextBox. I'm using this mask: "(###) ###-#### #######". The last 7 numbers being for extension numbers. I understand that there are 4 different options that provide differing values in my backend .ascx file: Text / TextWithLiterals / TextWithPrompt / TextWithPromptAndLiterals. Everything works as expected when following the mask from left-to-right.

But weird things are happening when the user inputs in the middle of the mask: When I debug my RadMaskedTextBox properties in C#, all of these 4 options are ignoring the last 7 numbers.

 

First: Is it a supported feature of RadMaskedTextBox to allow the user to input in the middle of a mask? 

If no ... what's the best workaround?

If yes ... how do I access the proper value?

 

Test values on front-end input:

• [phone] _534___
• [phone] _54__2_
• [phone] ____2__

 

When inspecting the input, there are 4 values on front-end: 

• validationText: "[phone] 2"
• valueAsString: "[phone] ____2__"
• valueWithPromptAndLiterals: "[phone] ____2__"
• lastSetTextBoxValue: "[phone] ____2__"

 

In the backend, all of these values are as follows: 

• Text: "5555555555"
• TextWithLiterals: "[phone]"
• TextWithPrompt: "5555555555_______"
• TextWithPromptAndLiterals: "[phone] _______"

 

I cannot find a single solution to allow the user to input a number in the middle of the mask. All the front-end values of the input seem to allow for the user to input in the middle of the mask. But why aren't ANY of these values sent back to C#? The only value I can find that doesn't ignore the extension is LastSetTextBoxValue - but this value is inaccessible. 

• LastSetTextBoxValue: "[phone] ____2__"

 

See images attached.

[Marin Bratanov]

Hi Daniel,

The TextWithPromptAndLiterals property should provide you with this text and I am attaching below a short video that showcases how this works:

<telerik:RadMaskedTextBox runat="server" ID="rmtb1" Mask="(###) ###-#### #######">
</telerik:RadMaskedTextBox>
<asp:Button Text="postback" ID="btn1" OnClick="btn1_Click" runat="server" />
<asp:Label Text="" ID="lbl1" runat="server" />

protected void btn1_Click(object sender, EventArgs e)
{
    lbl1.Text = rmtb1.TextWithPromptAndLiterals;
}

You can read more on the subject here: https://docs.telerik.com/devtools/aspnet-ajax/controls/maskedtextbox/features/getting-and-setting-values.

 

If this does not work for you, I advise that you review what is the difference with your setup and this snippet to find the culprit. A JavaScript error can also prevent the proper functioning of the control.

Also, please make sure that you are running the latest version.

In the meantime, there is another way to obtain this user input - you can simply store it from the client-side when the textbox loses focus:

<telerik:RadMaskedTextBox runat="server" ID="rmtb1" Mask="######">
    <ClientEvents OnBlur="OnBlur" />
</telerik:RadMaskedTextBox>
<asp:HiddenField runat="server" ID="hf1" />
<asp:Button Text="postback" ID="btn1" OnClick="btn1_Click" runat="server" />
<asp:Label Text="" ID="lbl1" runat="server" />
<script>
    function OnBlur(sender, args) {
        console.log(sender.get_valueAsString());
        document.getElementById("<%=hf1.ClientID%>").value = sender.get_valueAsString();
    }
</script>

protected void btn1_Click(object sender, EventArgs e)
{
    lbl1.Text = hf1.Value;
}

Generally speaking, typing in the middle of the mask can cause a variety of issues because it is not clear what has to happen with such a symbol when other positions are edited. For example, does it have to move towards the end? If so, what happens to the user input when the end of the mask is reached, or when a position where this character is invalid is reached? The former can result in loss of input, the latter - of unexpected UX - either the input can get invalidated unexpectedly, or input would not be allowed with an unclear reason since a valid character may be entered at the caret position. Or, what if one of the characters in the prompt (mask) is an allowed character for a certain position - how can code tell one from the other?

At the same time, to achieve a mask that is shown constantly to the end user, the value of the input has to contain that mask string. So, there is no way to prevent the user from selecting a location and typing in it. We cannot prevent the user from selecting as that would also be a bad user experience practice (if it were possible, I have not actually tested whether you can disable selection in an input).

With that said, input at any location is a heuristic task that has no absolute solution that will not create problems for many scenarios/requirements. 

Ultimately, the goal of the masked textbox is to prompt the user what to type in and you can consider implementing a custom validator that will enforce the desired input length/type/content as well. With this in mind, the primary use should be of the Text property while validation should consume it in order to ensure data correctness.

Regards,
Marin Bratanov
Progress Telerik