Visual Studio 2022 ASP.NET：如何设置TextBox获焦时的光标位置？

问题场景 #

在Visual Studio 2022开发ASP.NET WebForms应用时，为TextBox绑定ajaxToolkit:MaskedEditExtender控件后出现以下光标行为：

• 用户通过Tab键切换到空TextBox时，光标停留在最后一个"/"左侧
• TextBox已有内容时，Tab切换进去光标会定位在左侧
  需求：实现Tab键触发TextBox获焦时光标始终定位在最左侧，但用户通过鼠标点击定位光标时不受该规则限制。

解决方案 #

通过JavaScript监听TextBox的焦点事件，区分触发来源（键盘Tab/鼠标点击），在Tab触发时强制将光标设置到文本最左侧，同时避开MaskedEditExtender的默认光标处理逻辑。

步骤1：添加JavaScript脚本 #

在页面的<head>或<body>底部添加以下脚本：

// 标记是否为鼠标点击触发的焦点
let isMouseTriggered = false;

// 监听鼠标按下事件，标记是否点击了目标TextBox
document.addEventListener('mousedown', function(e) {
    const targetIds = ['<%= tbJob_Number.ClientID %>', '<%= tbEstimating_Job_Number.ClientID %>'];
    if (targetIds.includes(e.target.id)) {
        isMouseTriggered = true;
    }
});

// 鼠标松开后重置标记
document.addEventListener('mouseup', function() {
    isMouseTriggered = false;
});

// 设置光标到文本最左侧的函数
function setCursorToStart(textbox) {
    // 仅当非鼠标触发时执行
    if (!isMouseTriggered) {
        // 延迟执行，覆盖MaskedEditExtender的默认光标调整
        setTimeout(function() {
            textbox.selectionStart = 0;
            textbox.selectionEnd = 0;
        }, 10);
    }
}

步骤2：修改TextBox控件 #

为目标TextBox添加onfocus事件绑定，调用上述函数：

<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" />

<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" onfocus="setCursorToStart(this)"></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="lbJob_Name" runat="server" Text="Job Name:"></asp:Label>
<asp:Label ID="lbJob_Name_Display" runat="server"></asp:Label>

<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>

说明 #

• 使用setTimeout延迟执行光标设置：MaskedEditExtender在控件获焦时会自动调整光标位置，延迟10ms可以确保我们的逻辑覆盖控件的默认行为。
• 鼠标触发判断：通过监听mousedown和mouseup事件，标记是否是鼠标点击触发的焦点，避免干扰用户手动定位光标的操作。

内容的提问来源于stack exchange，提问作者Yuppski