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

2 posts, 0 answers
  1. Daniel
    Daniel avatar
    1 posts
    Member since:
    Sep 2018

    Posted 12 Sep 2018 Link to this post

    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:

    • (555) 555-5555 _534___
    • (555) 555-5555 _54__2_
    • (555) 555-5555 ____2__

     

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

    • validationText: "(555) 555-5555 2"
    • valueAsString: "(555) 555-5555 ____2__"
    • valueWithPromptAndLiterals: "(555) 555-5555 ____2__"
    • lastSetTextBoxValue: "(555) 555-5555 ____2__"

     

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

    • Text: "5555555555"
    • TextWithLiterals: "(555) 555-5555"
    • TextWithPrompt: "5555555555_______"
    • TextWithPromptAndLiterals: "(555) 555-5555 _______"

     

    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: "(555) 555-5555 ____2__"

     

    See images attached.


  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5078 posts

    Posted 17 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top