javascript 使用 JQuery 为 textarea 文本框添加水印
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10291063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Watermark for textarea textbox using JQuery
提问by Nick Kahn
i am trying to use watermark for the asp.net textbox control with jquery and below is the code i have, i see the title on my textarea textbox but when i focus or click on the textbox the watermark does not clear.
我正在尝试使用 jquery 为 asp.net 文本框控件使用水印，下面是我的代码，我在 textarea 文本框上看到标题，但是当我聚焦或单击文本框时，水印没有清除。
i got the script from here. http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html
我从这里得到了脚本。http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html
<asp:TextBox runat="server" ID="txtNew" class="auto-hint" title="Enter here ..."
TextMode="MultiLine" Rows="7" Width="100%"></asp:TextBox>
<script type="text/javascript">
$(document).ready(function () {
// Focus auto-focus fields
$('.auto-focus:first').focus();
// Initialize auto-hint fields
$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function () {
if ($(this).val() == $(this).attr('title')) {
$(this).val('');
$(this).removeClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function () {
if ($(this).val() == '' && $(this).attr('title') != '') {
$(this).val($(this).attr('title'));
$(this).addClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function () {
if ($(this).attr('title') == '') { return; }
if ($(this).val() == '') { $(this).val($(this).attr('title')); }
else { $(this).removeClass('auto-hint'); }
});
});
</script>
回答by COLD TOLD
if you are just using the idea of watermark there are many alternatives and a lot easier way to achieve it
如果您只是使用水印的想法，那么有很多替代方法和更简单的方法来实现它
1) you can try using http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx
1）您可以尝试使用http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx
2) in the HTML5 there is a new attribute for input text called placeholder that will do exactly what you want.
2) 在 HTML5 中有一个名为 placeholder 的输入文本的新属性，它可以完全满足您的需求。
3) you can use more advanced jquery plugin like this it a lot easier to setup and not requires to much effort http://code.google.com/p/jquery-watermark/
3）你可以使用更高级的 jquery 插件，它更容易设置，不需要太多努力 http://code.google.com/p/jquery-watermark/
here are couple more
这里还有更多
http://wiki.jqueryui.com/w/page/12138131/Watermark
http://wiki.jqueryui.com/w/page/12138131/Watermark
I hope it helps in certain way
我希望它以某种方式有所帮助
回答by ajax333221
回答by Hemal Bhalodia
You can also use WaterMark Control that need less or you can say no configuration just put below code and it will work...
您还可以使用需要较少的 WaterMark 控件，或者您可以说没有配置，只需将代码放在下面，它就可以工作...
<asp:TextBox runat="server" ID="txtNew" class="auto-hint" title="Enter here ..." TextMode="MultiLine" Rows="7" Width="100%" data-watermark="Enter here...">
As you can see i have place data-watermark="Enter here...".
如您所见，我有 place data-watermark="Enter here..."。
and yes please include WaterMark Control JS with jquery.js because Watermark Control JS uses jquery. And yes you can animate your watermark using WaterMark Control.
是的，请在 jquery.js 中包含 WaterMark Control JS，因为 Watermark Control JS 使用 jquery。是的，您可以使用 WaterMark Control 为水印制作动画。
You can find Watermark Control JS from myjqueryplugin.com/watermark-control.
您可以从myjqueryplugin.com/watermark-control找到 Watermark Control JS 。
