asp:TextBox（TextMode="Date"）日期内容复制实现方案咨询

原生asp:TextBox(TextMode="Date")在多数浏览器里会限制文本选中和右键复制功能，这是因为浏览器对日期输入框的默认交互设计是强制通过日历选择日期，而非手动编辑文本。以下是两种可行的实现方案：

方案一：添加自定义复制按钮（推荐） #

通过JavaScript获取日期输入框的value值（格式为YYYY-MM-DD），再调用剪贴板API完成复制，同时兼容老浏览器。

ASPX代码： #

<asp:TextBox ID="DateInput" runat="server" TextMode="Date"></asp:TextBox>
<button type="button" onclick="CopyDate()">复制日期</button>

JavaScript代码： #

function CopyDate() {
    const dateBox = document.getElementById('<%= DateInput.ClientID %>');
    const dateValue = dateBox.value;
    
    if (!dateValue) {
        alert('请先选择日期');
        return;
    }

    // 优先使用现代剪贴板API
    if (navigator.clipboard) {
        navigator.clipboard.writeText(dateValue)
            .then(() => alert('日期已复制到剪贴板'))
            .catch(err => {
                console.log('剪贴板API调用失败，使用降级方案');
                FallbackCopy(dateValue);
            });
    } else {
        FallbackCopy(dateValue);
    }
}

// 老浏览器降级方案
function FallbackCopy(text) {
    const tempInput = document.createElement('input');
    tempInput.style.position = 'absolute';
    tempInput.style.left = '-9999px';
    tempInput.value = text;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
    alert('日期已复制到剪贴板');
}

方案二：修改输入框交互，允许选中文本 #

通过JavaScript监听输入框的点击事件，临时阻止日历弹出，让用户可以选中并复制文本。但此方案会影响默认的日历选择体验，谨慎使用：

document.getElementById('<%= DateInput.ClientID %>').addEventListener('mousedown', function(e) {
    e.preventDefault();
    this.focus();
    this.select();
});

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