2

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..

skaffman
  • 398,947
  • 96
  • 818
  • 769
Hulk
  • 32,860
  • 62
  • 144
  • 215

5 Answers5

14

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>

Amy B
  • 17,874
  • 12
  • 64
  • 83
  • In this if the user enters a text and again clicks on the textarea it becomes null again.... – Hulk Mar 29 '10 at 06:57
  • 3
    change "onclick" to "onfocus" and "this.value == 'Enter textarea'" to "this.value == this.defaultValue" and this works extra-well! – David Mar 29 '10 at 07:13
  • The full answer is for focused and not focused is here: http://stackoverflow.com/a/3329751/950427. I gave you the upvote as well! – Jared Burrows Jul 08 '13 at 17:14
1

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.

Asim Sajjad
  • 2,526
  • 10
  • 36
  • 73
1

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

    });
})
Abhishek
  • 11
  • 1
0

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.

Glavić
  • 42,781
  • 13
  • 77
  • 107
0

Here is a nice one using jQuery

jQuery Watermark

rahul
  • 184,426
  • 49
  • 232
  • 263