Clear textarea containing instructions on click or when text is entered?

Question

I'm new to JavaScript, so I'm not sure where to look to do this.

I have a web page where the user can enter a message in a textarea box. I want to have instructions for them in the box, this is just an example:

<TEXTAREA NAME="message" ROWS=10 COLS=80>Enter your text here</TEXTAREA>

When the user clicks within this textarea boxes or starting to enter text, I want it to immediately clear out the instructions text.

I've seen this done on web pages, but I can't find any to examine.

possible duplicate https://stackoverflow.com/questions/1626107/text-in-html-field-to-disappear-when-clicked/5077265#5077265 — Nachshon Schwartz, Sep 17 '17 at 18:49
Possible duplicate of [Text in HTML Field to disappear when clicked?](https://stackoverflow.com/questions/1626107/text-in-html-field-to-disappear-when-clicked) — 4castle, Sep 17 '17 at 18:50

Mihai Alexandru-Ionut · Accepted Answer · 2017-09-17T19:01:54.783

2

You should just replace it with a placeholder.

<textarea name="message" rows=10 cols=80 placeholder="Enter your text here"></textarea>

or you could do this by binding event handlers for blur and focus.

let message="Enter your text here";
$('textarea').focus(function(){
  if($(this).val() === message)
       $(this).val('');
});
$('textarea').blur(function(){
  if($(this).val().length === 0)
       $(this).val(message);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="message" rows=10 cols=80>Enter your text here</textarea>

edited Sep 17 '17 at 19:01

answered Sep 17 '17 at 18:46

Mihai Alexandru-Ionut

47,092
13
101
128

When the user clicks on it, it does nothing. I want it to clear the text on click too, not just when they enter text. – Edward Coast Sep 17 '17 at 18:58
@EdwardCoast, have a look now. – Mihai Alexandru-Ionut Sep 17 '17 at 19:02
Does it matter where in the web page this JavaScript is placed? I already have an onclick button that calls a function. Is this event like clicking on a button so I could place it anywhere? – Edward Coast Sep 17 '17 at 19:05
You should also use `click` function. – Mihai Alexandru-Ionut Sep 17 '17 at 19:07
In this example `click` is also suitable instead of `focus` in order to achieve your requirement. – Mihai Alexandru-Ionut Sep 17 '17 at 19:20

Nachshon Schwartz · Answer 2 · 2017-09-17T18:48:47.103

1

use placeholder to do this

<TEXTAREA NAME="message" ROWS=10 COLS=80 placeholder="Enter your text here"></TEXTAREA>

edited Sep 17 '17 at 18:48

answered Sep 17 '17 at 18:45

Nachshon Schwartz

15,289
20
59
98

Asifuzzaman Redoy · Answer 3 · 2017-09-17T19:15:59.480

0

Hello If you want to use javascript or jquery then try the below code

     $(function() {
    var defaultText = 'Enter your text here';
    $('#txt').focus(function() {
        defaultText = $(this).val();
        $(this).val('');
    }).blur(function() {
    if($(this).val().length === 0)
        $(this).val(defaultText); 
        
     });
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TEXTAREA NAME="message" id="txt" ROWS=10 COLS=80 >Enter your text here</TEXTAREA>

edited Sep 17 '17 at 19:15

answered Sep 17 '17 at 18:48

Asifuzzaman Redoy

1,773
1
15
30

1

This is probably undesirable, because if the user enters some text, leaves the control, and then reenters the control, it will delete what they entered. – 4castle Sep 17 '17 at 18:50
Also add event handler for `blur` method in order to reinitialize the value. – Mihai Alexandru-Ionut Sep 17 '17 at 18:52

Barr J · Answer 4 · 2017-09-17T19:12:28.073

0

Attach an event on focus to your text area.

//assigns value to yext area

    document.getElementById("textarea").value = "this is an example";

    //does focus event
        document.getElementById("textarea").addEventListener("focus", myFocusMethod, true) ;

        function myFocusMethod(){
        document.getElementById("textarea").value = "";
        }

    //does click
    function doClick() {
    }

<TEXTAREA id="textarea" NAME="message" ROWS=10 COLS=80 onclick="doClick();"></TEXTAREA>

edited Sep 17 '17 at 19:12

answered Sep 17 '17 at 18:50

Barr J

10,636
1
28
46

Where in the flow of a web page does this get put in the JavaScript? I have a clickon button which calls a function. Would this be part of that function? – Edward Coast Sep 17 '17 at 19:03
before the function. this even listenes to the client actions and acts when a client focuses on the text area. updated snippet with comments for you. – Barr J Sep 17 '17 at 19:07

Clear textarea containing instructions on click or when text is entered?

4 Answers4