ASP TextBox点击清空及提交后值为空问题的原因与解决

咱们先拆解下你遇到的问题：点击TextBox清空内容没问题，但提交后日志显示空字符串，核心原因通常出在客户端JS逻辑和服务器端回发的配合上，具体分两种常见情况：

常见原因 #

• 你用JS实现点击清空时，没有区分「默认提示文本」和「用户实际输入的内容」：比如你把默认提示直接写在了TextBox的Text属性里，点击清空后如果用户没输入新内容，回发时服务器拿到的就是空值；甚至有些情况JS会在回发前误清空用户已经输入的内容。
• 服务器端的Page_Load代码写错了：如果每次页面加载（包括回发）都重置TextBox的Text属性，那用户输入的值会被直接覆盖，自然提交后拿到空字符串。

针对性解决方案 #

1. 用HTML5 Placeholder（最简单省心的方案） #

不用写任何JS，直接给TextBox加Placeholder属性，浏览器会自动帮你处理默认提示、点击清空的逻辑，而且回发时服务器能正常拿到用户输入的值：

<asp:TextBox ID="txtYourInput" runat="server" Placeholder="请输入内容"></asp:TextBox>

这个方案兼容性很好，除了IE9及以下的老浏览器（现在基本没人用了），完全能满足需求。

2. 必须用JS实现时的正确写法 #

如果因为特殊需求必须自己写JS，那要做3件事：区分默认提示和用户输入、处理失去焦点的恢复逻辑、提交前避免提交默认值：
首先在ASPX里给TextBox加自定义属性标记默认值：

<asp:TextBox ID="txtYourInput" runat="server" Text="请输入内容" data-default="请输入内容" Style="color:#999;"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" />

然后写JS逻辑：

// 获取TextBox的客户端ID（ASP.NET会自动生成，所以用<%= %>输出）
const txtInput = document.getElementById('<%= txtYourInput.ClientID %>');
const submitBtn = document.getElementById('<%= btnSubmit.ClientID %>');

// 点击TextBox时，只有当前值是默认提示才清空
txtInput.addEventListener('click', function() {
    if (this.value === this.dataset.default) {
        this.value = '';
        this.style.color = '#000';
    }
});

// 失去焦点时，如果为空，恢复默认提示
txtInput.addEventListener('blur', function() {
    if (this.value.trim() === '') {
        this.value = this.dataset.default;
        this.style.color = '#999';
    }
});

// 提交前：如果当前是默认提示，设为空再提交，避免把提示文本发去服务器
submitBtn.addEventListener('click', function() {
    if (txtInput.value === txtInput.dataset.default) {
        txtInput.value = '';
    }
});

服务器端的Page_Load要注意只在首次加载时设置默认值：

protected void Page_Load(object sender, EventArgs e)
{
    // 只有非回发（首次加载）时才设置默认值
    if (!IsPostBack)
    {
        txtYourInput.Text = "请输入内容";
        txtYourInput.Attributes.Add("data-default", "请输入内容");
        txtYourInput.Style.Add("color", "#999");
    }
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
    // 这里就能拿到用户输入的值了，如果是空就是用户真的没输入
    string inputValue = txtYourInput.Text.Trim();
    // 后续逻辑...
}

3. 检查ViewState设置 #

确保你的TextBox没有禁用ViewState（默认是启用的），如果EnableViewState="false"，回发时服务器可能无法保留用户输入的值。除非你有特殊需求，否则保持默认的EnableViewState="true"即可。

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