ASP.NET回发后TextBox的onfocus事件异常：非掩码值被清空

问题场景 #

原本通过onfocus/onblur实现TextBox的占位掩码功能，前端代码如下：

<asp:TextBox ID="ContactNameTextBox" runat="server"
    onblur="if(value=='')value=defaultValue;" 
    onfocus="if(value==defaultValue)value='';">
</asp:TextBox>

后台在回发时处理空值：

if (ContactNameTextBox.Text.Trim() == "")
{
    ContactNameTextBox.Text = "Contact Name";
}

正常情况下文本框有内容时点击可正常编辑，但其他控件触发回发后，无论文本框内是掩码值还是用户输入的内容，点击都会触发清空操作。

问题根源 #

回发后页面重新渲染，TextBox的defaultValue会被设置为当前服务器端返回的Text值。此时如果用户之前输入了内容，回发后value和defaultValue相等，onfocus事件里的判断value==defaultValue就会触发清空，导致用户输入的内容被误删。

修复方案 #

直接在前端事件中判断具体的掩码文本，而非依赖defaultValue：

1. 前端代码修改 #

把defaultValue替换为明确的掩码字符串“Contact Name”：

<asp:TextBox ID="ContactNameTextBox" runat="server"
    onblur="if(value.trim() === '') value = 'Contact Name';" 
    onfocus="if(value === 'Contact Name') value = '';">
</asp:TextBox>

注：给onblur加了trim()判断，和后台逻辑保持一致，避免空格串触发掩码恢复

2. 后台代码保留 #

原有的后台逻辑可以继续使用，确保回发后空值（含空格串）会被重置为掩码文本：

if (ContactNameTextBox.Text.Trim() == "")
{
    ContactNameTextBox.Text = "Contact Name";
}

如果有多个TextBox需要相同逻辑，可以封装成通用方法：

private void ResetTextBoxMask(TextBox textBox, string maskText)
{
    if (textBox.Text.Trim() == "")
    {
        textBox.Text = maskText;
    }
}

调用示例：ResetTextBoxMask(ContactNameTextBox, "Contact Name");

效果验证 #

修改后，只有当文本框的值是“Contact Name”时，点击才会清空；用户输入的内容在回发后，点击文本框不会触发清空，可正常编辑或删除。

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