Adding watermarks to textarea

Question

How to add watermarks like "Enter textarea" for a textarea.

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

Thanks..

Answer 1

I think you mean placeholder?

In HTML5:

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

In HTML4:

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

Answer 2

There are many solutions. One of them is that all form elements have <label for="XX"> and all elements have <element id="XX"> so that you know to which element label belongs. Then in CSS you hide some labels, and with JS you check all hidden labels, and write label title/content to the form elements, if that element is empty. Then with JS you show and hide this text based on hover and inputed text.

Answer 3

Here is a nice one using jQuery

jQuery Watermark

Answer 4

here is the code

<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'" />

from link

hope that will help.

Answer 5

i have written a jquery code for my purposes. i think it might be excellent for your problem

to use it for any of your textarea/text field, you just have to add 'watermark' class & add 'placeholder' attribute with the watermark value to it.

e.g <textarea rows="2" placeholder="Post your question here" name="query_area" id="query_area" class="watermark">Post your question here</textarea>

the jquery code is as below.

    $(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');
        }

    });
})