Clearing with Javascript?

Question

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:

If <textarea> matches the value Welcome, click here to type; it should clear the text once the user clicks in the text area.
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. :)

Tim Down · Accepted Answer

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>

Clearing <textarea> with Javascript?

Tags:

javascript

Tek

1 Answers

Tim Down

Recent Activity

Donate For Us