You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用AjaxToolkit MaskedEdit控件时退格键失效问题求助(ASP.NET+Edge)

问题描述

在ASP.NET项目中使用AjaxToolkit(版本1.0.20229)的MaskedEditExtender、MaskedEditValidator及CalendarExtender实现了两个日期输入文本框,用于选择日期并确保输入格式符合数据库要求。但在Microsoft Edge浏览器中,这两个文本框均无法使用退格键或删除键,仅能通过覆盖的方式输入内容(类似键盘的插入模式)。目前仅在GitHub上找到一些无回应的旧帖子提及此问题,由于是公司项目,无法升级AjaxToolkit版本,急需解决方案或思路。

相关代码
<asp:TextBox ID="tbStartDt" runat="server" width="100" placeholder="00/00/0000" />
<asp:ImageButton ID="StDateButton" runat="server" ImageUrl="~/images/Calendar_scheduleHS.png" />  
<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator8" runat="server" ControlExtender="MaskedEditExtender8"
    ControlToValidate="tbStartDt" Display="Dynamic" InvalidValueMessage="Date is invalid"
    ToolTip="Input a Date">
</ajaxToolkit:MaskedEditValidator>
<asp:Label ID="FrDateLabel" runat="server" ForeColor="Red"></asp:Label>
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender8" runat="server" Mask="99/99/9999"
    MaskType="Date" TargetControlID="tbStartDt">
</ajaxToolkit:MaskedEditExtender>
<ajaxToolkit:CalendarExtender ID="CalendarExtender8" runat="server" CssClass="MyCalendar"
    PopupButtonID="" TargetControlID="tbStartDt">
</ajaxToolkit:CalendarExtender>
<ajaxToolkit:CalendarExtender ID="CalendarExtender10" runat="server" CssClass="MyCalendar"
    PopupButtonID="StDateButton" TargetControlID="tbStartDt">
</ajaxToolkit:CalendarExtender>
解决方案思路

由于无法升级AjaxToolkit版本,可通过以下方式修复问题:

  • 自定义JS解除按键拦截:旧版本MaskedEditExtender可能在Edge中错误阻止了退格、删除键的默认行为,可编写JS代码重新绑定事件,允许这些按键正常工作:
document.addEventListener('DOMContentLoaded', function() {
    var dateInput = document.getElementById('<%= tbStartDt.ClientID %>');
    dateInput.addEventListener('keydown', function(e) {
        // 允许退格(8)、删除(46)、方向键(37-40)的默认行为
        if ([8, 46, 37, 38, 39, 40].includes(e.keyCode)) {
            e.stopImmediatePropagation();
        }
    });
});
  • 移除重复的CalendarExtender:当前代码为同一个文本框绑定了两个CalendarExtender,可能引发控件冲突,建议仅保留一个带弹窗按钮的实例:
<ajaxToolkit:CalendarExtender ID="CalendarExtender10" runat="server" CssClass="MyCalendar"
    PopupButtonID="StDateButton" TargetControlID="tbStartDt">
</ajaxToolkit:CalendarExtender>
  • 调整MaskedEditExtender属性:尝试添加AutoComplete="False"和ClearMaskOnLostFocus="True"属性,优化输入交互逻辑:
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender8" runat="server" Mask="99/99/9999"
    MaskType="Date" TargetControlID="tbStartDt" AutoComplete="False" ClearMaskOnLostFocus="True">
</ajaxToolkit:MaskedEditExtender>

内容的提问来源于stack exchange,提问作者Alex Mo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.21 02:13:26