CODEWITHSUNDEEP
javascripthtmlonclicktextareaonblur
Charles
Charles

Reputation: 4538

HTML Textarea With Multiple Lines Breaks onClick and onBlur Functions

I have a textarea in which I'm putting some default text into. Let's just say the default textarea text is "Insert Text Here."

I'm using the JavaScript onClick and onBlur functions to make it so that when the user clicks on the textarea with the "Insert Text Here." message, the message will go away and be replaced by a blank space. If the textarea is blank and the user clicks out of it, once again the textarea will show the "Insert text Here." message. Here's my code for this process:

<textarea onclick="if(this.value=='Insert Text Here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert Text Here.'}">Insert Text Here.</textarea>

This code is working just fine. The problem occurs when the "Insert Text Here." is replaced with something that consists of multiple lines. For example:

<? $textarea = "Line 1\n\nLine 2"; ?>
<textarea onclick="if(this.value=='<? echo $textarea ?>'){this.value=''}" onblur="if(this.value==''){this.value=<? echo $textarea ?>'}"><? echo $textarea ?></textarea>

In this case, the onClick and onBlur commands are broken, because there is an inequality between the $textarea value between the two textarea tags and the $textarea value being used in the onClick and onBlur methods. The value of $textarea between the two tags is:

Line 1

Line 2

Whereas the value of $textarea in the onBlur and onClick methods is:

Line 1\n\nLine 2

Apparently, these two are unequal.

I know what the problem is, but I do not know how to fix it. I have tried replacing \n with other alternatives, but the problem boils down to the fact that \n is processed between the tags, while it is not registered as line breaks in the onBlur and onClick methods.

Does anyone have any ideas as to solve this issue?

Thanks!

Upvotes: 3

Views: 1673

Answers (1)

bugwheels94
bugwheels94

Reputation: 31940

Give the same default value to title of textarea

  <?php $textarea = "Line 1\n\nLine 2"; ?>
  <textarea onclick="if(this.value==this.title){this.value=''}" onblur="if(this.value==''){this.value=this.title}" title="<?php echo $textarea ?>"><?php echo $textarea ?></textarea>

There are many advantages of this method :

It will show INSERT TEXT HERE everytime you mouseover the textarea and this is used by facebook too

Upvotes: 1

Related Questions