jQuery: Prevent enter key

Question

I am trying to prevent the enter key from being put into a textarea, but it doesn't seem to work.

$('#comment').keyup(function(event) {
  if (event.text.charCodeAt() == '10') {
     event.preventDefault();
   }
});

Solution 1

I have written little demonstration on jsfiddle.net, where you can try this code

Everybody has right answer :)

$('#comment').keypress(function (event) {
    if (event.keyCode === 10 || event.keyCode === 13) {
        event.preventDefault();
    }
});

Solution 2

You can't cancel a keyup event. You can cancel keydown and keypress events though. In the documentation, notice that under "Event Information", "Cancels" is "No" for keyup:

• keyup
• keydown
• keypress

Using keydown allows you to cancel far more keys than keypress, but if you don't want to cancel until after the key has been lifted, keypress is what you want. Fortunately for you, the enter key is one of the cancellable keys for the keypress event.

Solution 3

Use event.keyCode in the keydown event:

$('#comment').keydown(function(event) {
   if(event.keyCode == 13) return false;
   //carry on...
});

Solution 4

While the answers provided here will prevent someone from typing a carriage return, it will not prevent someone from pasting one in.

You would need to do some post processing of the text (in javascript or server-side) to remove them.

http://jsfiddle.net/we8Gm/

But the question is, why? Why not simply use <input type="text"></input> which takes care of this automatically as it is a single-line input element?

Solution 5

$('#comment').keypress(function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

View more solutions

Comments

[James T]

I dont think the event is triggering, how can I tell if $('#comment') is correctly being what I want?

[Martin Jespersen]

Rememebr to hook into the change event as well as the keyup/down/press that everybody else has displayed. with every solution here, people can still paste linebreaks into th textarea, to prevent that you need to remove them ;)

[Jacob Relkin]

Wha? The keycode for the Enter key is 13, not 10.

[Jacob Relkin]

@Šime Vidas I guess you could use the keydown event.

[Šime Vidas]

@Bubby LOL accepted answer for copy-pasting someone else's code into jsfiddle?

[James T]

Because I need the box to be tall, not wide. There's only like 50 px of width.

[Jeff B]

Now I am curious what you would use a tall skinny input for.

[James T]

Ajax chat widget I designed, so a user can hit enter to submit the message.

[Tomislav Markovski]

10 is LF (line feed) and 13 is CR (carriage return). He should prevent both.

[ThiefMaster]

@TomislavMarkovski: No. The keyCode is always 13. See e.g. unixpapa.com/js/key.html

[Ben]

Just as a note; keyCode 10 is needed because Safari on iPhones sends keycode 10 when enter is pressed

[Sanghyun Lee]

@Ben When I tested it sends 13 instead of 10. Is there any document about that? I cannot find one.

[Ben]

@Sangdol there should be some documentation on standard keycodes; but 10 and 13 are both needed, hence the OR operator

[Semmel]

Instead of keyCode you can just use which.