css - 如何在MVC4中自定义@Html.TextBoxFor(..)的水印文本

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

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

我们当然可以使用这些 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';}">

Answer 3

为此，您必须考虑 JQuery Placeholder 插件，使用此插件，您必须只定义一个与您的示例完全相同的占位符属性。

插件和几个例子可以在这里找到。