Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Input / Placing the cursor at the beginning of the input field

Placing the cursor at the beginning of the input field

Article Info

Rating: 5

Article information

Article relates to

RadInput

Created by

Paul, Telerik

Last modified

March 10, 2008

Last modified by

Maria Ilieva, Telerik

HOWTO
Place the cursor at the beginning of the input filed on clicking the input

DESCRIPTION
In some cases you would want to place the cursor at the beginning of the input when the user clicks in the input filed.

SOLUTION
Here are the steps to accomplish this:

  1. Add the following JavaScript function in the HEAD tag of your page:

    <script type="text/javascript">
        function EnableFocusReset (maskedTextBox)
        {
            var field = maskedTextBox.field;
            if (field.attachEvent)
            {
                field.attachEvent('onfocus', function ()
                {
                    field.select();
                    var s = field.createTextRange();
                    s.collapse(true);
                    s.select();
                });
            }
            else
            {
                field.addEventListener('focus', function (e)
                {
                    field.selectionStart = field.selectionEnd = 0;
                    e.preventDefault();
                }, false);
            }
        }
    </script>
     
  2. Add the following JavaScript after the declaration of your maskedTextBox fields:

        <    script type="text/javascript">
            EnableFocusReset(RadMaskedTextBox1);
            EnableFocusReset(RadMaskedTextBox2);
            EnableFocusReset(RadMaskedTextBox3);
        </    script>
     
    where RadMaskedTextBox1, RadMaskedTextBox2 and RadMaskedTextBox3 are the IDs of the masked TextBoxes on your page that have to take advantage of that functionality.
     

 

SOLUTION:

This functionality could be achieved, by simply setting the SelectionOnFocus property to "CaretToBeginning"

ASPX:

<div>
    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1"  runat="server" DisplayFormatPosition="Left" NumericRangeAlign="Right" SelectionOnFocus="CaretToBeginning" >
    </telerik:RadMaskedTextBox>
</div>

Comments

  • Brian Favell , Jan 13, 2006

    This is very usefull. I would like to see the following functionality: When the RadMaskedTextBox gains focus, the cursor is placed to the right of the last unmasked character. However if the cursor is within the existing unmasked text, the cursor remains where it was originally clicked.

  • Bruce Hacker , Mar 6, 2006

    This should be included in the text input product

  • Sean Clifford , Mar 7, 2006

    Actually, I found that instead of using EnableFocusReset(RadMaskedTextBox1); you should use EnableFocusReset(<%=RadMaskedTextBox1.ClientID%>);

  • Creata Vivendi , Mar 28, 2007

    this is especially helpful if you're tabbing into a masked text box. there is currently a bug that when you select the entire text of a dateinput box, and begin to type, it resets the contents to '01/01/0001'. Using this javascript prevents the entire text being selected when i tab into this textbox from a previous one. Thank you!

  • binici , Apr 3, 2007

    However, I receive a script error if my radinput control is not visible. I've tried to modify the script to incorporate logic to work only if the control is visible. Any ideas?

  • Telerik Admin , Jun 5, 2007

    We have introduced new property for the input controls for version 2.0.0 called SelectionOnFocus. It allows you to determine the position of the cursor when the input gains focus without extra coding, therefore this article is applicable for version 1.x of RadInput only. Here is a link to the relevant online demo: http://www.telerik.com/demos/aspnet/Input/Examples/RadTextBox/Settings/DefaultCS.aspx

  • binici , Sep 14, 2007

    Hello its me again! I recently just added my content into MasterPages and boy does everything blow up! Anyhow, I am just the most recent RadInputMask controls and opted to just use the esetCaretOnFocus="true" instead. Thank you all!

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.