使用 JQuery 的 textarea 文本框的水印 [重复]答案

【问题标题】：Watermark for textarea textbox using JQuery [duplicate]使用 JQuery 的 textarea 文本框的水印 [重复]
【发布时间】：2012-04-24 02:39:26
【问题描述】：

我正在尝试使用 jquery 为 asp.net 文本框控件使用水印，下面是我拥有的代码，我在我的 textarea 文本框中看到了标题，但是当我关注或单击文本框时，水印不清除。

我从这里得到了脚本。 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>

【问题讨论】：

我无法立即看到可能出了什么问题。如果您可以获得一些脚本调试信息，它可能会有所帮助...
如果您尝试使用 asp.net 文本框控件，您将看到该行为
我刚刚在 ASP.NET 中运行了代码，它按预期工作（输入时水印清除）......我只能建议您使用浏览器调试工具（跟踪和观察）来计算出什么事了。

标签： javascript jquery asp.net

【解决方案1】：

如果你只是使用水印的想法，有很多替代方法和更简单的方法来实现它

1) 你可以尝试使用http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/TextBoxWatermark/TextBoxWatermark.aspx

2) 在 HTML5 中有一个用于输入文本的新属性，称为占位符，它可以完全满足您的需求。

3) 你可以使用像这样更高级的 jquery 插件，它更容易设置并且不需要太多的努力 http://code.google.com/p/jquery-watermark/

希望对你有帮助

【讨论】：

【解决方案2】：

代码本身运行良好（参见demo）

问题似乎出在您的选择器中

【讨论】：

你用asp.net文本框控件试过了吗？
@AbuHamzah 说实话，我什至不知道那些是什么。但是我不需要知道就可以通过证明代码有效来缩小搜索范围

【解决方案3】：

您也可以使用需要较少的 WaterMark 控件，或者您可以说没有配置，只需将其放在代码下方即可...

如您所见，我有地方 data-watermark="Enter here..."。

是的，请在 jquery.js 中包含 WaterMark Control JS，因为 Watermark Control JS 使用 jquery。是的，您可以使用 WaterMark Control 为您的水印制作动画。

你可以从myjqueryplugin.com/watermark-control找到Watermark Control JS。

【讨论】：