向文本区域添加水印答案

【问题标题】：Adding watermarks to textarea向文本区域添加水印
【发布时间】：2010-03-29 06:54:00
【问题描述】：

如何为文本区域添加水印，例如“输入文本区域”。

   <textarea rows = "8" cols = "18" border ="0" class="input" style="border: none;" WRAP id="details" name ="details"></textarea>

谢谢..

【问题讨论】：

标签： javascript html css css-selectors

【解决方案1】：

我想你的意思是占位符？

在 HTML5 中：

<textarea placeholder="Enter textarea"></textarea>

在 HTML4 中：

<textarea onclick="if (this.value == 'Enter textarea') this.value = '';">Enter textarea</textarea>

【讨论】：

在这种情况下，如果用户输入文本并再次单击文本区域，它会再次变为空......
将“onclick”更改为“onfocus”，将“this.value == 'Enter textarea'”更改为“this.value == this.defaultValue”，效果非常好！
关于专注和不专注的完整答案在这里：stackoverflow.com/a/3329751/950427。我也给你投了赞成票！

【解决方案2】：

这里是代码

<input type="text"   name="q" size="25" maxlength="255" value=""/ class="googlesearch" onfocus="if(this.value != '') this.className = 'googlesearch2'" onblur="if(this.value == this.defaultValue) this.className = 'googlesearch'" />

来自link

希望这会有所帮助。

【讨论】：

【解决方案3】：

我已经为我的目的编写了一个 jquery 代码。我认为它可能非常适合您的问题

要将它用于您的任何文本区域/文本字段，您只需添加“水印”类并添加带有水印值的“占位符”属性。

例如<textarea rows="2" placeholder="Post your question here" name="query_area" id="query_area" class="watermark">Post your question here</textarea>

jquery 代码如下。

    $(document).ready(function(){

    $(".watermark").each(function(){
       $(this).val($(this).attr('placeholder'));
    });

    $(".watermark").focus(function(){

        var placeholder = $(this).attr('placeholder');
        var current_value = $(this).val();
        $(this).css('color', '#192750');
        if(current_value == placeholder) {
            $(this).val('');


        }

    });

    $(".watermark").blur(function(){

        var placeholder = $(this).attr('placeholder');
        var current_value = $(this).val();

        if(current_value == '') {
            $(this).val(placeholder);
            $(this).css('color', '#676767');
        }

    });
})

【讨论】：

【解决方案4】：

有很多解决方案。其中之一是所有表单元素都有并且所有元素都有以便您知道标签属于哪个元素。然后在 CSS 中隐藏一些标签，使用 JS 检查所有隐藏的标签，如果该元素为空，则将标签标题/内容写入表单元素。然后使用 JS，您可以根据悬停和输入的文本显示和隐藏此文本。

【讨论】：

【解决方案5】：

这是一个使用 jQuery 的好方法

jQuery Watermark

【讨论】：