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.

Jegar

I have never come across a problem like this; can you create a .html page with a <textarea> in - nothing else, and let the users see if they can use the Return key in that textarea? Stripping down a problem to the base and adding functionality is probably the best Trial and Error method. – Wilkey

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.

Segmentation

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

Laurentian

This has happened to me a few times, I usually add this above preventDefault if(e.target.tagName.toLowerCase() == 'textarea'){ return } – Clinton

Answer 3

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

Disarticulate

Answer 4

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.

Borborygmus

Answer 5

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

</textarea>

Sandstrom

opps, just some finger trouble when pasting in. – Jegar

Answer 6

$('#Body').keypress(function(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
    this.value = this.value.substring(0, this.selectionStart) + "" + "\n" + this.value.substring(this.selectionEnd, this.value.length);
  }
});

Shirty

Answer 7

Some answers mention the preventDefault method, but don't limit your search to that as other JavaScript might be the culprit too.

For example, you may have a form element that looks similar to this:

<form onkeydown="return event.keyCode != 13">

That will cause all TextAreas on the form to ignore the Enter keypress.

Which brings us to another point: Reduce the problem by creating another barebones TextArea on the same page or another page to see if it exhibits the same problem. Doing that will often help narrow down the cause.

Obliteration