After entering text in the texta area, text disappears if I return to the area

This text area in this Web Form works successfully when I enter text, and then move on to the next Form field, but if I return to the text area and click in the text area again, all the text that I’ve entered disappears. Any help with fixing it so the text doesn’t disappear will be appreciated. Here’s the code:

<td colspan="3"><textarea id="contact-message" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">MESSAGE:</textarea>

And here’s more code:


#contact-message{
width: 1200px;
height: 100px;
font-size: 26px;
color: #696969;
padding: 20px 0px 0px 50px;
line-height: 22px;
margin: 0px auto;
outline:none;
border:none;
}

#contact-message:focus {
font-size: 16px;
padding: 5px 0px 0px 50px;
outline: none;
}
1 Like

I’m not JavaScript literate, but I would think that something like this might have something to do with it.

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

^ That.

The way to do it is remove the inline JavaScript.
Add an eventListener
then

if (value === "original value") {
value = '';

the setbg function what return exactly?
I think it’s there the issue.
if onBlur set only the color your function do only this and cancel any other thing.

Thanks for the replies.
So, are you saying I should remove this:

   Onfocus="this.value='';`

And replace it with this?:

if (value === "original value") {
value = '';

You can still use the focus event, but as it is now the value is assigned an empty string every time it gets focus no matter how or what.

If the value for an unsubmitted form field is known to be a String, you van add a conditional test and only set it to an empty string when the field first gets focus. Granted, it would also do this if someone entered the same exact string, but that should happen next to never.

It might be possible to inline script conditionals, but even then it would be messy.

I’m biased, but IMHO eventListeners are much better.

If you thought there might someday be a problem with the value being changed and causing a problem, you can set the value in an “init” to keep it in one place eg.

var message_element = document.getElementById()
var input_value = "MESSAGE:":
add the focus event listener 
test to see if the message_element.value / textContent === input_value 

Hi there ChrisjChrisj,

have you not considered using the “placeholder attribute”

<textarea id="contact-message" placeholder="MESSAGE:"></textarea>

…for your project rather than “JavaScript”?

coothead

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.