5

I would like to have something like <textarea>Welcome, click here to type.</textarea>

Then clear when the user clicks on the text area, obviously.

But.

Before anyone mentions that there are duplicates of this question on this site already there are other details that are not mentioned in the answers. For example:

I've seen that it's possible to clear <textarea> without onclick() and only having an <textarea id="someid">. I just don't know how they did it, I would like to do this. Not only do I like my code clean but I'd like to know how this was possible. (I'm thinking onClick() somehow being inside the <head><script type="text/javascript"></script></head>?)

I also want the <textarea> to not clear once someone has typed something and clicks on the text area again. i.e. When the user clicks the text area again to edit a certain part of the text entered.

I don't know much Javascript but this is the way I see it working:

  1. If <textarea> matches the value Welcome, click here to type; it should clear the text once the user clicks in the text area.
  2. If <textarea> is empty and is no longer on focus it should return the value "Welcome, click here to type." again.

This means clicking on the text area again wouldn't clear the text, which prevents the text from being cleared once the user has already typed something in the box.

Thanks in advance for helping me out! Your knowledge on this matter would be greatly appreciated. :)

Improve this question

4 Answers 4

Reset to default
6

In the <head>, you could do the following:

<script type="text/javascript">
    var textAreaDefaultText = "Welcome, click here to type.";

    function textAreaFocus(textarea) {
        if (textarea.value == textAreaDefaultText) {
            textarea.value = "";
        }
    }

    function textAreaBlur(textarea) {
        if (textarea.value == "") {
            textarea.value = textAreaDefaultText;
        }
    }

    window.onload = function() {
        var textarea = document.getElementById("your_textarea_id");
        textarea.onfocus = function() { textAreaFocus(this); };
        textarea.onblur = function() { textAreaBlur(this); };
    };
</script>

In this instance, there's a distinct advantage in using event handler attributes instead (although at the expense of mixing script in with your markup, something that is not generally recommended for various reasons, chief of which is separation of concerns): the code will then work as soon as the textarea is rendered, whereas with the above method, if the user clicks on the textarea before the rest of the document has loaded, the event handler will not have been created and nothing will happen. Therefore if you don't mind having a little script in your markup, recommend dropping the window.onload part and instead doing:

<textarea id="your_textarea_id"
    onfocus="textAreaFocus(this)"
    onblur="textAreaBlur(this)">Welcome, click here to type.</textarea>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I don't think there is a "distinct advantage" here, unless the page loads exceptionally slowly or require this as a key part of the page UI (I'm thinking search engines, although won't they have the input focused by default?), certainly not compared to using inline events.
It's incontrovertibly an advantage, so I don't see your point. The fact that you end up with script mixed in with markup is arguably a disadvantage, which I'm not denying. I presented both options objectively, so I don't think a downvote was warranted.
Yi Jiang: Oh! I am truly an idiot. Ignore me. Sorry to have accused you like that.
A BIG THANK YOU FOR YOU! It's exactly what I was looking for. Simply beautiful! :)
5

Firstly, if your site's users are using modern web browsers, there is a relatively new feature called placeholders that can do what you want for free - ie no extra code required at all.

  <textarea name="mytextfield" placeholder="Click here to type"></textarea>

However, as I said, this only works in relatively new browsers; older browsers will ignore it. The field will still work correctly though, so you won't break anything in old browsers by having this; they just won't show the placeholder. If you can live with that, this would be the best option for you.

If that's no good enough, then you'll need to go the Javascript route. If you're using JQuery, there are some JQuery plug-ins which will do all the work for you, which makes it almost as easy as the placeholder option.

Try this one for example: http://plugins.jquery.com/project/placeholder (but be aware that there are several others available that do the same job)

Improve this answer

2 Comments

+1. I hadn't come across that. It's a new attribute in HTML5 and is apparently supported in Safari 5, Chrome 6 and Firefox 4.
I like this answer but too bad I have to make it work in IE6 =(
2

onclick="foobar" is only one way to bind event handlers. It's common (best?) practice to bind event handlers purely in JavaScript instead of mixing JavaScript bindings with the HTML. (The provided link doesn't provide best practices for making sure the DOM objects you need are available to manipulate. However, for learning, it is sufficient, and when you move on to using a JavaScript framework, it will be handled for you (in addition to browser inconsistencies, among other things)).

Also, you may want to check for the focus event instead of the click event, as that handles other cases like being tabbed to.

Improve this answer

Comments

2 
area = document.getElementById('someid');
area.onfocus = function() {
    if (area.value == 'DEFAULT VALUE HERE') area.value = '';
};

By the way, focus is better than click because it covers clicking as well as tabbing in using the keyboard, another form of focus.

Improve this answer

5 Comments

Good point, +1. But ah... where in the document would I place this snippet so that it works?
As an additional (optional) idea, it should be possible to check against area.defaultValue instead of a pre-defined string. But that's splitting hairs.
innerHTML does not fetch the field value, it reflects the original content of the field which is defaultValue, except on IE due to bugs. Don't use innerHTML or getAttribute('value') on form fields as it won't do what you think. Instead, as Pekka suggests, compare area.value to area.defaultValue.
Whoops, I did innerHTML by accident. Changing it now. Can I have my downvote removed? :P
Yes: the logic is the wrong way round. != should be ==. Also, this doesn't address the issue of what happens when the textarea loses the focus.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.