This is a migrated thread and some comments may be shown as answers.

RadMaskedTextBox Behavior Problem

17 Answers 412 Views

Input

This is a migrated thread and some comments may be shown as answers.

johnv asked on 23 Jun 2010, 09:10 PM

To Whom it may concern,

My team is developing an app that uses RadTextBoxes and we are experiencing a problem where the masked textbox doesn't behave as we think it should. Ideally we think that the textbox should work just like a regular asp.net textbox except that it shows a mask to the user and only allows specific characters (such as numbers for a phone number) to be entered.

In an asp.net textbox the text is always left justified. In other words you can't simply click to the 7th character place in the textbox and begin typing - it defaults to the first available empty character and is always left justified.

Not so with the RadMaskedTextBox. You can begin typing in any position you want.We played with the different options like SelectAll, CaretToBeginning, and CaretToEnd, but some of us are just not happy with the outcome and feel that it may be confusing to some of our users.

Is there any way to get the look, feel, and functionality we are looking for with this control? Thanks!

Kind Regards,

John

17 Answers, 1 is accepted

answered on 28 Jun 2010, 05:17 PM

Hi John,

You can make the caret go to the left side of the MaskedTextBox by wiring the client-side OnFocus event of the control and use the set_caretPosition() property as in the code-snippet below:

function onFocus(sender, eventArgs) {

sender.set_caretPosition(0);

If you want to make it go to the left on each click in the RadMaskedTextBox, you can add the OnClick event to the control's attributes from the code-behind, for example in the PageLoad event handler:

RadMaskedTextBox1.Attributes["onclick"] = "onClick(this, event);";

And here is an example code showing how to find the control in this javascript function(it is advisable to surround the functions with a RadCodeBlock):

function onClick(sender, eventArgs) {

var maskedTextBox = $find("<%=RadMaskedTextBox1.ClientID %>");

maskedTextBox.set_caretPosition(0);

}

If there is any difference in your requirements for the caret position from what I implemented, you can check this article describing client properties and methods of the RadMaskedTextBox and perform some custom logic on setting the caret's position.

If any other issues concerning this scenario arise, please let me know by posting in the support ticket you have open, as it will be easier for us to follow each other's posts there.

Kind regards,
Tsvetina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 02 Jul 2010, 05:05 PM

maskedtextboxtest-left-justified.zip

Hi Fawad,

I tested this approach in both browsers Chrome and Safari and it worked well on my side. I am attaching a sample project, which also includes the logic for the caret to go to the first "empty" position (by empty I mean the first position in the mask which is not filled with the expected character). Try it on your side and let me know if I am missing something out.

Greetings,
Tsvetina
the Telerik team

answered on 02 Jul 2010, 06:33 PM

Hello Admin,

Thanks for prompt reply, sorry, I should have been clearer. Actually the method I am using is "onFocus" not "onClick" but I don't know if that should matter?

My box is in an ASP panel which I have then ajaxified with RadAjaxManager and put the code in RadCodeBlock. Because in real scenario I am clicking on RadGrid and getting the values in those boxes in ajaxified environment. But initially they are empty, so desired situation is to show on left. I am using VS 2010 and .NET 4.0, does that matter?

I have put all my logic in your provided example and now your example also has stopped working in Safari and Chrome.

Please see html:

                    <body>         
                <form id="form1" runat="server">         
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">         
                    <Scripts>         
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />         
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />         
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />         
                    </Scripts>         
                </telerik:RadScriptManager>         
                <telerik:RadAjaxManager ID="mgr" runat="server">         
                    <AjaxSettings>         
                        <telerik:AjaxSetting AjaxControlID="pnl">         
                            <UpdatedControls>         
                                <telerik:AjaxUpdatedControl ControlID="pnl" />         
                            </UpdatedControls>         
                        </telerik:AjaxSetting>         
                    </AjaxSettings>         
                </telerik:RadAjaxManager>         

Now here is RadCodeBlock, I have to set caret conditionally, that is, if the values are filled with RadGrid, then I don't need to set caret at all, please see:

                    <telerik:RadCodeBlock ID="rcb" runat="server">         
                    <script type="text/javascript">         
                        function onFocus(sender, eventArgs) {         
                     
                            var maskedTextBox = $find("RdTxtMobile");         
                     
                            if (maskedTextBox.get_value().length == 0 || sender.get_value().length == null) {         
                                maskedTextBox.set_caretPosition(0);         
                            }         
                            /*        
                            var value = maskedTextBox.get_valueWithPromptAndLiterals();        
                            var index = value.indexOf("");        
                            maskedTextBox.set_caretPosition(index);        
                            */         
                     
                        }         
                    </script>         
                </telerik:RadCodeBlock>         

Here is rest of html, as my requirement is not to show any prompt characters :

                    <div>         
                    <asp:Panel ID="Pnl" runat="server">         
                        <telerik:RadTextBox ID="txt1" TabIndex="0" runat="server">         
                        </telerik:RadTextBox>         
                        <telerik:RadMaskedTextBox ClientEvents-OnFocus="onFocus" ClientIDMode="Static" ID="RdTxtMobile"         
                            PromptChar="" runat="server" Mask="##### ######">         
                        </telerik:RadMaskedTextBox>         
                    </asp:Panel>         
                </div>         
                </form>         
            </body>         

Please see that where am I wrong and help me.

Kind Regards.

answered on 06 Jul 2010, 01:58 PM

Hi,

If I understand your requirements correctly, the built-in properties of the RadMaskedTextBox control will handle this scenario. If you use SelectionOnFocus="CaretToEnd" the input caret appears at the end of the input control's value when it first gets focus and the text written by the user is appended to the control's current value.

Please, correct me if I miss something out.

Sincerely yours,
Tsvetina
the Telerik team

answered on 08 Jul 2010, 05:04 PM

Hi admin,

No that is not what I am after. Here is the scenario:

I have a masked textbox, with PromptChar set to "" because the requirement is not to show any "_" etc.
I also have a RadGrid on the page. There are two requirements:
1. On page load, the texbox is empty. I want the caret to go to extreme left in that empty MaskedTextBox when the box gets focused.
2. On Grid's RowClick, the textbox is automatically filled with a value from Grid in AJAX way. Now this time, I do not want any action at all if box gets focus, means user can click anywhere and caret should stay.

Simple enough, I have achieved both requirements in IE as below:

<telerik:RadCodeBlock ID="rcb" runat="server">

<script type="text/javascript">

function onFocus(sender, eventArgs) {

var maskedTextBox = $find("RdTxtMobile");

if (maskedTextBox.get_value().length == 0 || sender.get_value().length == null) {

maskedTextBox.set_caretPosition(0);

}

/*

var value = maskedTextBox.get_valueWithPromptAndLiterals();

var index = value.indexOf("");

maskedTextBox.set_caretPosition(index);

*/

}

</script>

</telerik:RadCodeBlock>

But this is not working in both Safari and Chrome. I searched and found out both use WebKit so in my view this client model is not working in WebKit. Please check if its the case.

Regards.

answered on 09 Jul 2010, 10:03 AM

Hi,

Yes, this seems to be browser dependant issue, as it works fine in Firefox, too. Still, if you use the OnClick event as I described above, everything works as expected in all four aforementioned browsers.

One more downside of using OnFocus is that when you once set focus and the caret goes to the first position, if you click again in the textbox the javascript for setting position does not execute (as there was no loss and gain of focus) and the caret could go anywhere in the empty control.

My suggestion is that you consider using OnClick instead of OnFocus.

Kind regards,
Tsvetina
the Telerik team

answered on 31 Jan 2019, 11:30 AM

Hi,

Thank you for the additional information, shakeel. The experienced behavior is changed intentionally several years ago (in the middle of 2015) in order to give the ability to hide characters behind "*" sing (e.g. when displaying a credit card number). The item for this feature can be seen here:
https://feedback.telerik.com/aspnet-ajax/1374294-improve-radmaskedtextbox-with-ability-to-hide-mask-certain-characters-when-the-input-is-not-in-focus

Regards,
Vessy
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadMaskedTextBox Behavior Problem

17 Answers, 1 is accepted