How can I disable the ENTER key on my textarea?

Question

<form name='qform'>
<textarea name='q' rows='3' cols='60' wrap='hard' id='q' onkeydown="if (event.keyCode == 13) document.getElementById('clickit').click()"></textarea>
<input type='button' value='search' id='clickit' onclick="get();">
</form>

I have this form... it doesn't have a submit button because I am using jquery and under this form is a div area where the results will be shown. It is a search engine that does not have an input box but instead has a textarea. This is because it will be a multiple word searcher.

The problem is that if I press enter, the query is submitted and everything is ok ... but the focus on textarea goes down one line and that is a problem for me.

Basically I want the enter to have that one function only(submit) end nothing else.

You could just put the focus back on the textarea after the submit. But if the user clicks the "search" button, won't focus go to the button anyway? — RobG, Jul 15 '11 at 23:51
Does this answer your question? [Disable New Line in Textarea when Pressed ENTER](https://stackoverflow.com/questions/18779322/disable-new-line-in-textarea-when-pressed-enter) — Alain Cruz, Sep 01 '21 at 17:15

score 22 · Answer 1 · edited Aug 31 '18 at 02:44

22

$(document).ready(function() {

    $('textarea').keypress(function(event) {

        if (event.keyCode == 13) {
            event.preventDefault();
        }
    });
});

edited Aug 31 '18 at 02:44

Pang

9,564
146
81
122

answered Apr 21 '14 at 16:09

alpc

598
3
6

[`keyCode` is deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode). For standards compatibility, use [`event.key === "Enter"`](https://www.w3.org/TR/uievents-key/#keys-whitespace) instead. – Marcel Waldvogel Oct 03 '22 at 10:49

Michael Mior · Answer 2 · 2011-07-15T23:42:12.443

15

Why not just use <input type="text"> if you don't want multiple lines? You mentioned it will be a "multiple word searcher". Why does this require a <textarea>?

Update

Try this

$('textarea').bind('keypress', function(e) {
  if ((e.keyCode || e.which) == 13) {
    $(this).parents('form').submit();
    return false;
  }
});

edited Jul 15 '11 at 23:42

answered Jul 15 '11 at 23:33

Michael Mior

28,107
9
89
113

6

You might want to change the `return false;` to `e.preventDefault()`, just in case there are keypress bindings further up the DOM – qwertymk Jul 15 '11 at 23:45
Assuming you don't want those bindings, yes :) – Michael Mior Jul 15 '11 at 23:48
REASON: I am sending text messages, they cannot have line breaks, yet at the same time I don't want the display of the text box to scroll to the right -- thus a textarea is appropriate. – Andy Oct 16 '19 at 21:27
@Andy Assuming you're talking about SMS, linebreaks would normally be allowed. – Michael Mior Oct 17 '19 at 17:55

score 13 · Accepted Answer · answered Jul 15 '11 at 23:39

13

In the jquery function, use event.preventdefault and next do what you like. For example

<script>
$("a").click(function(event) {
  event.preventDefault();
//Do your logic here
});
</script>

http://api.jquery.com/event.preventDefault/

answered Jul 15 '11 at 23:39

Null Head

2,877
13
61
83

score 0 · Answer 4 · answered Oct 11 '22 at 11:29

0

Pure javascript:

document.addEventListener('keypress', function (e) {
    if (e.keyCode === 13 || e.which === 13) {
        e.preventDefault();
        return false;
    }

})

answered Oct 11 '22 at 11:29

S.Alvi

144
1
10

How can I disable the ENTER key on my textarea?

4 Answers4