Question

我的@ Html.TextBoxFor（）中有水印文字。我想通过将水印文本更改为淡入淡出颜色来自定义它，并在单击文本框时隐藏水印文本。

这是我的代码 -

@Html.TextBoxFor(model => model.Code, new { maxlength = 5, @placeholder="watermark" })

Answer 1

由于所有浏览器都不支持书签，因此即使用户没有使用支持它的浏览器，也应该使用一些javascript为用户提供相同的水印感觉。如果你正在使用jQuery，那么试试这个https://code.google.com/p/jquery-watermark/

Answer 2

为此，你必须考虑JQuery Placeholder插件，使用这个插件你必须只像你的例子一样定义一个占位符属性。

可以找到插件和几个示例here。

Answer 3

虽然新浏览器支持占位符文本，但它们在焦点上的行为却不同。我个人认为完全可以接受它们是不同的浏览器。

我们当然可以使用这些CSS属性设置占位符文本的样式

<强> CSS

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

如果你想要一个基于JavaScript的解决方案，而不是使用插件，这可以很容易地自己完成，即使不需要jQuery。

JS示例

<input type="text" value="Watermark" onfocus="if (this.value == 'Watermark') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Watermark';}">

如何在MVC4中自定义@ Html.TextBoxFor（..）的水印文本

3 个答案: