Return key not working within a <textarea>

Question

I have an issue with a textarea that is defined on an asp.net page. The textarea is populated in the back end with text read directly from an mssql database.

<div id="emailForm" runat="server" style="display:inline;">
  <textarea name="Body" id="Body" rows="20" cols="20">
     text in here
  <textarea>
</div>

The following CSS is applied to the emailForm div:

padding: 5px;
width: 750px;
font-family: Lucida Sans, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;

and to the textarea itself:

height: 360px;

Some users have reported that whilst they can edit the text within the textarea they cannot get the return key to function. New lines cannot be added?

I've search the net but cant find an example of this happening. If anyone has any bright ideas i'd love to hear. Thanks.

Answer 1

To add to Christoffer's Answer, if you are facing same problem you can solve it by replacing the following code:

$(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });

with this one:

$(window).keydown(function(event){
    if((event.which== 13) && ($(event.target)[0]!=$("textarea")[0])) {
      event.preventDefault();
      return false;
    }
  });

this would allow the textarea to have enter (new line), still preventing the enter key for the rest.

Answer 2

Had the same problem but found it was because I had a .preventDefault() on the form - initially to prevent enter to submit the form.

this.$el.keypress(function(e){
    if(e.which === 13){
        e.preventDefault();
    }
}

13 is the keypress code for enter

Answer 3

I've never heard of anything like this before, but my guess would be that it's to do with the display:inline;

That shouldn't be valid when the element contains something like a textarea.

I'd suggest changing it to display:inline-block;. That might be enough to fix it. But either way it's definitely the correct display type for what you're doing.

Answer 4

In my case the issue was due to the use of White-Space: normal. When I removed this the problem went away.

Answer 5

Your code is correct exept the closing tag of the textarea :

</textarea>