如何在ASP.NET的TextBox中实现时间输入自动添加冒号功能

方案1：纯JavaScript实现（无第三方依赖，推荐） #

该方案不需要引入额外组件，通过原生JS监听输入事件实现需求，兼容性好。

实现步骤 #

1. 在ASPX页面中定义TextBox控件，绑定输入事件：

<asp:TextBox ID="txtTime" runat="server" MaxLength="5" oninput="autoAddColon(this)" onblur="validateTime(this)"></asp:TextBox>

2. 页面添加对应JS逻辑：

// 自动插入冒号并调整光标位置
function autoAddColon(input) {
    // 过滤非数字输入，避免非法字符
    let rawValue = input.value.replace(/[^0-9]/g, '');
    let valueLength = rawValue.length;

    if (valueLength >= 2) {
        // 拼接小时、冒号、分钟
        input.value = `${rawValue.substring(0,2)}:${rawValue.substring(2,4)}`;
        // 光标定位到冒号后第1位
        input.setSelectionRange(3, 3);
    } else {
        input.value = rawValue;
    }
}

// 可选：失焦时校验时间格式合法性
function validateTime(input) {
    const timeRule = /^([01]\d|2[0-3]):[0-5]\d$/;
    if (!timeRule.test(input.value) && input.value.trim() !== '') {
        alert('请输入合法时间，格式为HH:mm，例如14:25');
        input.focus();
    }
}

功能说明 #

• 自动过滤非数字输入，避免用户输入非法字符
• 输入满2位小时后自动插入冒号，光标自动跳转到冒号后
• 限制最大输入长度为5位，符合HH:mm的格式要求
• 可选的失焦校验，保证输入的时间范围合法

方案2：使用Ajax Control Toolkit MaskedEditExtender #

如果你的项目已经引入了Ajax Control Toolkit组件库，可以直接使用封装好的掩码输入控件，无需自行编写JS逻辑：

<asp:TextBox ID="txtTime" runat="server"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender ID="TimeMaskExtender" runat="server"
    TargetControlID="txtTime"
    Mask="99:99"
    MaskType="Time"
    AcceptAMPM="false"
    ErrorTooltipEnabled="true"
    ErrorMessage="请输入合法的时间格式HH:mm">
</ajaxToolkit:MaskedEditExtender>

功能说明 #

• 控件自动处理冒号插入、光标定位逻辑
• 自带基础格式校验，无需额外编码
• 需提前在项目中引入并注册Ajax Control Toolkit库

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