具有多行的 HTML 文本区域 onClick 和 onBlur 函数

Question

我有一个文本区域，我将一些默认文本放入其中。假设默认的 textarea 文本是“在此处插入文本”。

我正在使用 JavaScript 的 onClick 和 onBlur 函数来实现，以便当用户单击带有“在此处插入文本”的文本区域时。消息，该消息将消失并由一个空格代替。如果 textarea 为空白并且用户单击它，则 textarea 将再次显示“在此处插入文本”。信息。这是我的这个过程的代码：

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

这段代码运行良好。当“在此处插入文本”时会出现问题。替换为由多行组成的内容。例如：

<? $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>

在这种情况下，onClick 和 onBlur 命令被破坏，因为两个 textarea 标记之间的 $textarea 值与 onClick 和 onBlur 方法中使用的 $textarea 值之间存在不等式。两个标签之间的$textarea的值为：

Line 1

Line 2

而 onBlur 和 onClick 方法中 $textarea 的值是：

Line 1\n\nLine 2

显然，这两者是不相等的。

我知道问题出在哪里，但我不知道如何解决它。我尝试用其他替代方法替换 \n，但问题归结为在标签之间处理 \n 的事实，而它没有在 onBlur 和 onClick 方法中注册为换行符。

有人有解决这个问题的想法吗？

谢谢！

Answer 1

给文本区域的标题赋予相同的默认值

  <?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>

这种方法有很多优点：

每当您将鼠标悬停在文本区域时，它都会在此处显示 INSERT TEXT，这也被 facebook 使用