如何清除文本EditorFor

Question

我在Razor页面上有这样一个元素：

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

当页面第一次呈现时，它有提示文本，比如“Enter name to search here”。

我想让这个文本在用户点击字段时消失，所以我写了一个小脚本，如下所示：

<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>

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

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

它是一个html输入type=" textbox“属性，它自动将默认文本添加到textbox作为默认提示，以便用户可以理解在该textbox中应该给出什么。为此，您不需要使用任何脚本。

希望这能有所帮助。

Answer 2

你想做水印吗？您可以在HTML5中使用"placeholder“属性

​

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

​

Answer 3

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

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

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