Question

I have a comment box and having trouble restoring the placeholder after a user types into it and presses enter.

Here is my textarea:

<textarea title="Write a comment..." itemID="@item.ID" class="comment" placeholder="Write a comment..." autocomplete="off" role="textbox" id="comment" style="margin-top:8px"></textarea>   

This is what I’ve tried, but it doesn’t work:

    $(msgBox).val($(msgBox).attr('defaultValue'));

and

    $(msgBox).val('');

Not only does the placeholder not get reset, but the carriage return is still here. The textarea becomes blank with the cursor on the second line.

Answer 1

you should use a # sign for selecting an element by id, also you should add a attribute name, note that in your example there is no defaultValue attribute, and the selector returns nothing, I have added a blur event which fires after the textarea loses it’s focus, and if the value of teaxarea is empty it sets the placeholder attribute value as it’s value:

$('#comment').blur(function(){
   if ($.trim(this.value) == "") {
      $(this).val($(this).attr('placeholder'));
   }
})