Clearing <textarea> 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. ie 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 valueWelcome, 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. :)
4 answers
solution1
6 ACCPTED 2010-09-09 11:50:18
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>
solution2
5 2010-09-09 11:48:58
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)
solution3
2 2010-09-09 11:25:41
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.
solution4
2 2010-09-09 11:26:10
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.