Clear TEXTAREA value after click (onFocus)

Question

I'm currently using..

onfocus="this.value=''; return false;"

to clear the value within my textarea for leaving comments. However, when you click to enter a comment and type a few things, if you were to click outside the box to maybe read something else on the page and then return to your comment by clicking within the textarea box again, it clears your current input.

Is there anyway to clear the textarea on the initial click just to clear the default value and not the rest of the clicks for the rest of the browser page's session?

score 8 · Answer 1 · edited Nov 23 '11 at 07:13

8

It's better to put instructions into a label tag, position it over the textarea, and then hide it or show it if the textarea is focused. The reason for this is because your textearea will be populated with instructions and these might get sent if they are inside a form.

But, solve your problem, all you have to do is:

onfocus="if(this.value== "your initial text"){this.value=''}; return false;"

edited Nov 23 '11 at 07:13

Nathan Osman

71,149
71
256
361

answered Feb 17 '11 at 18:39

methodofaction

70,885
21
151
164

a better version would be onfocus="if(this.value=this.defaultValue){this.value=''}; return false;" – KOGI Feb 17 '11 at 18:43
@KOGI In an event where you type something and then click outside the box then return, your code will clear whatever typed so far, which leads to the original question. – MadushM Feb 10 '12 at 19:07
@MadushM - no, actually, it won't. Notice the bit that says `if( this.value == this.defaultValue )` that is a check to see if the value of the textbox is the same as it was when the page loaded. If you've changed it, the textbox won't be cleared. – KOGI Feb 14 '12 at 16:47

score 3 · Answer 2 · answered Oct 09 '12 at 14:29

I think it's a good habit to seperate the logic from the content. So, using jQuery (we all use jQuery, do we?) you could do:

$(document).ready(function() {
    var _bCleared = false;
    $('form textarea').each(function()
    {
        var _oSelf = $(this);

        _oSelf.data('bCleared', false);
        _oSelf.click(function()
        {
            if (!_oSelf.data('bCleared'))
            {
                _oSelf.val('');
                _oSelf.data('bCleared', true);
            }
        });
    });
});

This will iterate over all the textareas on the site and store a boolean value about their clear state in a seperate data binding. The onclick event is also handled separately for each textarea, so you can have multiple textarea / textarea clearings on a single page and no need for Javascript splattering your html.

score 1 · Answer 3 · answered Jul 23 '12 at 19:02

1

I know this is late, but to anyone else having this problem I believe the simplest answer is

onfocus="this.value=''; this.onfocus='';"

should do exactly what you want without having to store/check any variables.

answered Jul 23 '12 at 19:02

Justin

471
4
16

score 1 · Answer 4 · answered Jul 10 '13 at 06:36

Instead, use HTML5's placeholder and use a jquery plugin for older browsers.

Running example here: http://jsfiddle.net/dream2unite/xq2Cx/

<input type="text" name="email" id="email" placeholder="name@email.com">

must be accompanied by the following script:

$('input[placeholder], textarea[placeholder]').placeholder();

When you enter an email your text (placeholder) will disappear, only when you delete your email will the text (placeholder) reappear.

And finally, an obviously good example of a jquery plugin for placeholders is this one: http://mathiasbynens.be/demo/placeholder

score 1 · Answer 5 · answered Feb 17 '11 at 18:39

1

this will help

function clearTA {
   if(this.value != "type here") {
      this.value = ''; 
      return false;
   }
}

and onfocus html attribute

...onfocus="clearTA()"..

answered Feb 17 '11 at 18:39

naiquevin

7,588
12
53
62

score 1 · Answer 6 · answered Feb 17 '11 at 18:41

<script type="text/javascript">
function clearOnInitialFocus ( fieldName ) {
   var clearedOnce = false;
   document.getElementById( fieldName ).onfocus = (function () {
    if (clearedOnce == false) {
      this.value = '';
      clearedOnce = true;
    }
  })
}
window.onload = function() { clearOnInitialFocus('myfield');
</script>

Source: http://snipplr.com/view/2206/clear-form-field-on-first-focus/

score 0 · Answer 7 · edited Feb 17 '11 at 19:12

0

Declare a variable clearedOnce in javascript that is false. In your onfocus, check this variable. If it is false, then set it to true and clear your textarea. All later clicks will do nothing. Code :

onfocus='if (!clearedOnce) { this.value = ''; clearedOnce = true;} return false;'

edited Feb 17 '11 at 19:12

Andomar

232,371
49
380
404

answered Feb 17 '11 at 18:38

Sem Vanmeenen

2,111
11
13

score 0 · Answer 8 · answered Feb 17 '11 at 18:38

0

You could use a global page var.

In a script element above the element

var tracker = {};

Later...

<textarea name="a" onfocus="if(!tracker[this.name]) { tracker[this.name]=true; this.value=''; } return false;">Placeholder text</textarea>

answered Feb 17 '11 at 18:38

gergi

469
2
5

score 0 · Answer 9 · answered Feb 17 '11 at 18:40

So I take it you have a prefilled value such as "Enter your text here"? Try adding this javascript:

    function clearText(textarea,prefilled){
        if(textarea.value==prefilled)
            textarea.value="";
        return false;
    }

Then, your input should be: Enter your text here

This should get you started...

Clear TEXTAREA value after click (onFocus)

9 Answers9