如何在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

爲此，您必須考慮JQuery佔位符插件，使用此插件，您只能像您的示例一樣定義佔位符屬性。

該插件和幾個例子可以找到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';}">