填充文本区域 - JavaScript答案

【问题标题】：Populate Textarea - JavaScript填充文本区域 - JavaScript
【发布时间】：2011-05-20 03:37:30
【问题描述】：

我的要求是根据条件填充文本区域。

我从数据库中检索签名。
如果存在签名，则使用该值填充文本区域。
如果没有签名，那么 textarea 应该包含：
输入签名并在文本区域内单击，预先填充的文本应该消失。
如果用户没有输入任何文本并在区域外点击，预填充的文本应返回到 textarea。

我的代码不完整，但作为一个开始：

<textarea name="signature" 
    style="width:95%" 
    rows="10" 
    onclick="document.mailForm.signature.value='';">
 <c:choose>
  <c:when test="${signature} == '' ">
      <c:out value="${signaturePrefix}" />
  </c:when>
  <c:otherwise>
     <c:out value="${signature}" />
  </c:otherwise>
 </c:choose>
</textarea>

谢谢。

【问题讨论】：

StackOverflow 的概念是不是：根据需求交付代码。请阅读常见问题解答：stackoverflow.com/faq ;)
那么，您尝试过什么？什么地方出了错？你有没有遇到过placeholder attribute？
无条件的onclick="document.mailForm.signature.value='';" 是惹恼人们的好方法。

标签： javascript textarea

【解决方案1】：

对于 DB 部分，您应该粘贴到目前为止编写的代码/逻辑。对于文本出现/消失，您可以使用一些 jQuery 水印插件：

【讨论】：

感谢您的所有回复。我遇到的问题是，首先，单击文本区域会清除已从 db 填充的签名。我不知道如何为它提供条件，仅当预填充的文本在那里时才执行此操作。其次，一旦你点击它，我不知道如何将预填充的文本恢复到文本区域。
@Viidhya：因此我要求您使用 jQuery 插件来节省您的时间。例如，请参阅此Demo。

【解决方案2】：

仅当“值”为空字符串时才执行单击事件。然后，在处理函数结束时，删除事件，这样用户就不会丢失所有输入的文本。

function changeContent(element,type){
    element.innerHTML="";
    element.removeEventListener(type,changeContent,false);
}

<textarea name="signature" style="width:95%" rows="10" 
  <c:choose>
    <c:when test="${signature} == '' ">
      onclick="contentChange(this,'click');">
      <c:out value="${signaturePrefix}" />
    </c:when>
    <c:otherwise>
      ">
      <c:out value="${signature}" />
    </c:otherwise>
  </c:choose>
</textarea>

这在 IE 中不起作用，因为它使用 detachEvent。我建议使用一个框架来使这种方法具有最少的头发拉动。

【讨论】：