使用JQuery的textarea文本框的水印

时间:2012-04-24 02:39:26

标签: javascript jquery asp.net

我正在尝试使用水印作为带有jquery的asp.net文本框控件,下面是我的代码,我在textarea文本框中看到标题,但是当我对焦或点击文本框时,水印不清楚。< / p>

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

3 个答案:

答案 0 :(得分:7)

如果您只是使用水印的想法,有许多替代方案和更容易实现它的方法

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

2)在HTML5中,有一个名为占位符的输入文本的新属性,它将完全按照您的意愿执行。

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

这里还有几个

http://wiki.jqueryui.com/w/page/12138131/Watermark

我希望它以某种方式有所帮助

答案 1 :(得分:0)

代码本身完全正常(请参阅此demo

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

答案 2 :(得分:0)

你也可以使用需要更少的WaterMark Control,或者你可以说没有配置只是放在代码下面它会起作用......

<asp:TextBox runat="server" ID="txtNew" class="auto-hint" title="Enter here ..." 
TextMode="MultiLine" Rows="7" Width="100%" data-watermark="Enter here...">

正如您所看到的那样, data-watermark =&#34;在这里输入...&#34;

并且请将WaterMark Control JS与jquery.js一起包含,因为Watermark Control JS使用jquery。是的,您可以使用WaterMark Control为您的水印设置动画。

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