CODEWITHSUNDEEP
javascripthtmltextareaonfocus
Jeff
Jeff

Reputation: 81

Clear TEXTAREA value after click (onFocus)

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?

Upvotes: 5

Views: 33876

Answers (9)

Adriana Adrie Silva
Adriana Adrie Silva

Reputation: 11

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="[email protected]">

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

Upvotes: 1

Liquinaut
Liquinaut

Reputation: 3807

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.

Upvotes: 3

Justin
Justin

Reputation: 472

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.

Upvotes: 1

methodofaction
methodofaction

Reputation: 72415

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;"

Upvotes: 8

Sem Vanmeenen
Sem Vanmeenen

Reputation: 2151

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

Upvotes: 0

Derek Prior
Derek Prior

Reputation: 3517

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

Upvotes: 1

bryon
bryon

Reputation: 275

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

Upvotes: 0

naiquevin
naiquevin

Reputation: 7796

this will help

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

and onfocus html attribute 

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

Upvotes: 1

gergi
gergi

Reputation: 489

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>

Upvotes: 0

Related Questions