Populate Textarea - JavaScript

My requirement is to populate a textarea based on condition.

• I retrieve signature from db.
• If signature exists populate the textarea with the value.
• If there is no signature, then textarea should contain :
• E开发者_高级运维nter signature and on clicking inside the text area, the pre populated tetxt should disappear.
• If the user does not enter any text and clicks outside the area, the pre populated text should come back in the textarea.

My Code is not complete but as a start :

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

Thanks.

For DB part you should paste your code/logic written so far. For text appear/dispaear you can use some jQuery Watermark Plugin:

• http://code.google.com/p/jquery-watermark/
• http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/ (Demo)

Have a click event execute only if the "value" is the empty string. Then, at the end of the handler function, remove the event so that the user doesn't lose all their inputted text.

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>

This doesn't work in IE because it uses detachEvent. I would recommend using a framework to make this approach corss-browser with the least amount of hair pulling.