Question posted in
The official documentation can be found here.

Visual Studio 2022 ASP.NET : how to set the cursor position in a TextBox when it has focus?

I’m using Visual Studio 2022 and an ASP.NET webforms app.

I have a textbox linked to a ajaxToolkit:MaskedEditExtender.

If the user tabs from the previous control to the Text Box, and the textbox is empty, then the cursor is positioned to the left of the last "/".

If the user tabs from the previous control to the textbox, and the textbox is populated, then the cursor is positioned at the left.

How do I make the cursor be positioned at the left when the textbox is populated or empty when focus is set but not if the user has left mouse clicked on the control to position the cursor?

<asp:Label ID="lbJob_Number" runat="server" Text="Job Number:"></asp:Label>
<asp:TextBox ID="tbJob_Number" runat="server" Width="80px" AutoPostBack="True" ></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="meeJob_Number" runat="server" 
     BehaviorID="meeJob_Number" CultureAMPMPlaceholder="" 
     CultureCurrencySymbolPlaceholder=""
     CultureDateFormat="" CultureDatePlaceholder="" 
     CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" 
     CultureTimePlaceholder=""
     TargetControlID="tbJob_Number" 
     Mask="99/9999/???" MaskType="Number" ClearMaskOnLostFocus="false" />

<asp:Label ID="lbJob_Name" runat="server" Text="Job Name:"></asp:Label>
<asp:Label ID="lbJob_Name_Display" runat="server"></asp:Label>
<asp:Label ID="lbEstimating_Job_Number" runat="server" Text="Est Job No:" Visible="False"></asp:Label>

<asp:TextBox ID="tbEstimating_Job_Number" runat="server" Width="80px" AutoPostBack="True"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="meeEstimating_Job_Number" 
     runat="server" BehaviorID="meeEstimating_Job_Number" 
     CultureAMPMPlaceholder="" CultureCurrencySymbolPlaceholder="" 
     CultureDateFormat="" CultureDatePlaceholder="" 
     CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" CultureTimePlaceholder="" 
     TargetControlID="tbEstimating_Job_Number" 
     Mask="99/9999/???" MaskType="Number" ClearMaskOnLostFocus = "false"/>

<asp:Label ID="lbEstimating_Job_Name" runat="server" Text="Est Job Name:" Visible="False"></asp:Label>
<asp:TextBox ID="tbEstimating_Job_Name" runat="server" Enabled="False" Visible="False" Width="300px" MaxLength="30"></asp:TextBox>

Thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found this Posted by RK001 which says setting the Text Box onFocus

    onFocus="setCursorToStart(this)"

    to a Script function

    function setCursorToStart(x) {
    setTimeout(function() {
        x.setSelectionRange(0, 0);
    }, 0);
}

    As i'm using a MaskEditExtender here's my working version:-

    <head runat="server">
<title></title>
<style>
</style>
<script>
function setCursorToStart(x) {
    setTimeout(function () {
        x.setSelectionRange(0, 0);
    }, 0);
}
</script>
</head>
<body>

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
    <asp:TextBox ID="TextBox1" runat="server" Text="My Text"></asp:TextBox>
    <asp:Label ID="lbJob_Number" runat="server" Text="Job Number:"></asp:Label>
    <asp:TextBox ID="tbJob_Number" runat="server" Width="80px" AutoPostBack="True" onFocus="setCursorToStart(this)"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender ID="meeJob_Number" runat="server" BehaviorID="meeJob_Number" CultureAMPMPlaceholder="" CultureCurrencySymbolPlaceholder=""
            CultureDateFormat="" CultureDatePlaceholder="" CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" CultureTimePlaceholder=""
            TargetControlID="tbJob_Number" Mask="99/9999/???" MaskType="Number" ClearMaskOnLostFocus="false" />

    </div>
</form>
</body>

  2. 0

    You could use obj.selectionStart = obj.selectionEnd = position; to move the cursor, where obj is your TextBox and position is the position you want to move to.

    In the following code, assuming the cursor is at tbJob_Number, press Tab to switch the focus position, and you could find that the focus of tbEstimating_Job_Number is at the far left of the text. When the user directly specifies the cursor position with the mouse, onfocus will not affect the position of the cursor selected by the mouse.

    <head runat="server">
    <title></title>
    <script>
        function movePosition(obj,position) {
            obj.focus();
            obj.selectionStart = obj.selectionEnd = position;

        }

        function SetFocusPosition() {
            var element = document.getElementById("tbEstimating_Job_Number")
            movePosition(element,0)
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="lbJob_Number" runat="server" Text="Job Number:"></asp:Label>
            <asp:TextBox ID="tbJob_Number" runat="server" Width="80px" AutoPostBack="True"  Text="AAAA"></asp:TextBox>


            <asp:Label ID="lbJob_Name" runat="server" Text="Job Name:"></asp:Label>
            <asp:TextBox ID="tbEstimating_Job_Number" runat="server" Width="80px" AutoPostBack="True" Text="BBBB" onfocus="SetFocusPosition()" ></asp:TextBox>
        </div>
    </form>
</body>

    You could adjust it according to your needs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search