如何在 ASP.NET MVC TextBox 中设置占位符文本

Question

我的页面上有一个简单的时事通讯注册表单，其中包含 2 个文本框（姓名、电子邮件）和一个提交按钮。成功提交后，我想使用 ViewData["Message"] 显示成功声明。在将表单包装在 if 语句中之前，我可以在其上使用默认文本值和 jQuery 事件，但包装后它不起作用。这是代码；

@if (ViewData["Message"] != null)
{
    <span class="visitWriteup">Thank You for Signing Up for Our Newsletter!</span>
}
else
{

    using (Html.BeginForm("MailingList", "Home", FormMethod.Post, new { @class = "MailingListForm" }))
    {
        <span class="visitWriteup">
            Sign Up for Our Newsletter:
        </span>
        <span class="SignUpText">
            @Html.TextBoxFor(m => m.Name, new { @Value = "Name:" })

        </span>
        <span class="SignUpText">
            @Html.TextBoxFor(m => m.Email, new { @Value = "E-Mail:" })

        </span>
        <span class="errorText">@Html.ValidationMessageFor(m => m.Name)</span>
        <span class="errorText">@Html.ValidationMessageFor(m => m.Email)</span>
        <input type="submit" id="btnSubmit" class="btnSubmit" value="Subscribe" />
    }
}

如果文本框中没有 "Name:" 和 "E-Mail:" 值，表单将无法显示，而且我的 jQuery 函数也无法正常工作。

$(function () {
   $('#Name').click(function () {
       if (this.value == 'Name:' || this.value == '') {
        $(this).val('');
       }
    });
   $('#Name').blur(function () {
       if (this.value == '') {
          $(this).val('Name:');
       }
    });
});

如有任何帮助，我们将不胜感激。

Answer 1

看来您在输入字段中设置 placeholder 文本的方式有误。请按以下方式操作：

<span class="SignUpText">
    @Html.TextBoxFor(m => m.Name, new { placeholder="Name" })
</span>
<span class="SignUpText">
    @Html.TextBoxFor(m => m.Email, new { placeholder="E-mail" })
</span>

现在您不需要对 jQuery 做任何事情。

如何在 ASP.NET MVC TextBox 中设置占位符文本

How to set placeholder text in ASP.NET MVC TextBox

model-view-controller

jquery

viewdata