Question

我在Razor页面上有一个元素，如下所示：

<td>
    <div class="col-md-12">
        @Html.EditorFor(model => model.FreeTextName, new { htmlAttributes = new { @class = "form-control" } })
    </div>
</td>

当页面首次呈现时，其中包含提示文本，如“输入要在此处搜索的名称”

我希望当用户点击该字段时此文本消失，所以我写了一个像这样的小脚本：

<script type="text/javascript">
    $('#FreeTextSwitchId').focusin(
        $('#FreeTextName').val("")
        )
</script>

但是现在我的页面渲染了提示测试。我知道这是脚本做的，因为如果我这样做：$('#FreeTextName').val("test")那么'test'会显示而不是提示文本。

我在这里做错了什么？

Answer 1

像这样使用@Html.EditorFor()：

@Html.EditorFor(model => model.FreeTextName, new { @class = "form-control" })

现在，您已在@Html.EditorFor() .form-control中上课了。在脚本中使用您的类。做那样的脚本：

<script type="text/javascript">

    $('.form-control').on('blur click', function(){ 
        $(this).val("");
    });

</script>

此外，您还可以在placeholder="Your Hint"中使用@Html.EditorFor()属性，即：

@Html.EditorFor(model => model.FreeTextName, new { @class = "form-control", placeholder="Enter name to search for here" })

这是一个html输入类型=＆＃34;文本框＆＃34;属性自动将默认文本添加到文本框作为默认提示，以便用户可以理解在此文本框中应该给出的内容。为此，您不需要使用任何脚本。

希望这有帮助。

Answer 2

你试图做一个水印吗？你可以使用＆＃34;占位符＆＃34; HTML5中的属性

＆＃13;

 <input placeholder="example text" type="text" />

＆＃13;

Answer 3

您应该在输入中添加占位符。这是一个例子：http://jsfiddle.net/naeqgnd3/

<input placeholder="'Enter name to search for here" />

当用户输入输入时，文本将消失。

Answer 4

自从我使用MVC4以来，我实际上决定使用MVC4 input field placeholder中的最佳答案：

如何清除文本EditorFor

4 个答案: