disable enter key on specific textboxes

Question

I was looking for a way to do this, got a few scripts, but none of them is working for me.

When I hit enter in my textboxes, it shouldn't do anything.

I have tried a few JavaScript and jQuery scripts, but nothing is working for me.

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

    $('#comment').keyup(function() {
        var txt = $('#comment').val();
        $('#comment').val(txt.replace(/[\n\r]+/g, " "));
    });
});

score 51 · Answer 1 · answered Mar 30 '11 at 06:45

51

This works for me.

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

jsFiddle.

Your second piece looks like it is designed to capture people pasting in multiple lines. In that case, you should bind it to keyup paste.

answered Mar 30 '11 at 06:45

alex

479,566
201
878
984

it is working in fiddle but if i put that script in my local,it s not working. – Mar 30 '11 at 06:56
@user You may have an error in your JavaScript, enable your console and look for any errors. – alex Mar 30 '11 at 06:57
You should use $('textarea').on('keypress', function (){blah;}); so that you can kill it programmatically if needed using .off() – user4593252 Aug 12 '15 at 16:37
@MetalPhoenix The code I have translates to the `on()` method. Determining how to write the code depends on its purpose - for some cases, you don't ever need to unbind it, which means the code above is fine. If it weren't the case, you'd simply write it differently. – alex Aug 13 '15 at 23:08
I agree but since they are, essentially, the same but with the forward thinking of being able to unbind, why *wouldn't* you do that? Is there a performance difference? – user4593252 Aug 14 '15 at 13:17
@MetalPhoenix In order to unbind I would need a reference to the function or give it a unique namespace. – alex Apr 04 '16 at 16:30
Not entirely true: http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery But this is only important if you're stacking handlers (which you shouldn't do because it's not always clear what you're doing and can lead to debugging problems). The point remains that you can just call `$("obj").off("event");` and be done with it. – user4593252 Apr 06 '16 at 09:07
@MetalPhoenix There can end up having many listeners, due to jQuery plugins for example. Stacking listeners is fine if the situation calls for it. – alex Apr 06 '16 at 09:10
I agree with you. It's also good forward thinking to make it so you can de-register a handler later on if you need to so that you don't have to change the code for each one later or try to figure out which "thing" is making the textbox do something unexpected. Also, doing it with `.on` allows you to de-register a single listener without killing them all. – user4593252 Apr 06 '16 at 12:15
@MetalPhoenix You realise that `keydown()` with an argument maps to `on()` too, right? I also try to follow YAGNI. If my code doesn't need to unbind at the current time, I won't write it so it can be in the future. If I need it in the future, I'll modify it. I guess people's opinion on this is different. – alex Apr 06 '16 at 13:08
My experience shows that if you don't put it in before it's deployed, your company isn't going to want to pay to change things later. – user4593252 Apr 06 '16 at 13:12

score 22 · Answer 2 · answered Mar 01 '16 at 10:17

22

If you want to prevent Enter key for specific textbox then use inline js.

<input type="text" onkeydown="return (event.keyCode!=13);"/>

answered Mar 01 '16 at 10:17

Akshay

354
3
6

score 15 · Answer 3 · answered Jul 11 '12 at 04:20

It stops user to press Enter in Textbox & here I return false which prevent form to submit.

$(document).ready(function()
    {
        // Stop user to press enter in textbox
        $("input:text").keypress(function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
});

score 7 · Answer 4 · edited May 23 '17 at 12:34

7

Works for me:

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

http://jsfiddle.net/esEUm/

UPDATE

In case you're trying to prevent the submitting of the parent form rather than a line break (which only makes sense, if you're using a textarea, which you apparently aren't doing?) you might want to check this question: Disable the enter key on a jquery-powered form

edited May 23 '17 at 12:34

Community

1
1

answered Mar 30 '11 at 06:49

polarblau

17,649
7
63
84

Which browser are you using? Are you receiving any other JS errors? Is the selector correct? Have you tried to `return false;` as suggested here? – polarblau Mar 30 '11 at 07:27

score 5 · Answer 5 · edited Mar 20 '13 at 13:54

5

I found this combine solution at http://www.askmkhize.me/how-can-i-disable-the-enter-key-on-my-textarea.html

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

if ((event.keyCode || event.which) == 13) {

    event.preventDefault();
    return false;

  }

});

$('textarea').keyup(function() {

    var keyed = $(this).val().replace(/\n/g, '<br/>');
    $(this).html(keyed);


});

edited Mar 20 '13 at 13:54

Gijs Overvliet

2,643
3
28
35

answered Mar 20 '13 at 13:35

user1853583

69
1
7

score 3 · Answer 6 · answered Apr 26 '17 at 15:24

If you want to disable for all kind of search textbox. Give all them a class and use that class like 'search_box' following.

//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', '.inner_search_box', function (e) {
    if (e.which == 13) e.preventDefault();
});

cheers! :)

Ahsan K · Answer 7 · 2017-10-23T06:00:14.433

1

I don't understand why everybody here is suggesting to use jquery. There is a very simple method for it for a specific input element field. You can use its onKeyDown attribute and use e.preventDefault() method in it. Like this:

<input type="text" onKeyDown={(e) => e.preventDefault()}/>

Note: This is React JSX way of using this attribute you can use HTML basic way.

edited Oct 23 '17 at 06:00

answered Oct 20 '17 at 20:27

Ahsan K

57
7

Debbie Kurth · Answer 8 · 2021-03-05T00:22:29.757

1

Variation on Alex solution, but using plain javascript code. Can be used for any key. The prevent default, stops form submission. This is what is working for me.

<input type="text" placeholder = "0.0"  onkeydown = "noareturnkey(event)">

Then the simple javascript code:

function noreturnkey(event) {
  var x = event.which || event.keyCode;
  if (x == '13')
   event.preventDefault();
}

edited Mar 05 '21 at 00:22

answered Mar 04 '21 at 23:57

Debbie Kurth

403
3
16

Marc Uberstein · Answer 9 · 2011-03-30T07:31:25.503

0

Use global selector $('input')...if you use multiple text boxes on page the ID ('#comment') will cause problems. And when using dynamic content bind it using .live e.g.

$('input:not(textarea)').live('keypress',function(e) {
    if (e.which == 13) return false;
    if (e.which == 13) e.preventDefault();
});

(Disable enter for text boxes and leaves enter enabled for text areas)

edited Mar 30 '11 at 07:31

answered Mar 30 '11 at 06:51

Marc Uberstein

12,501
3
44
72

textarea ...basically using the tag name instead of a class or ID selector – Marc Uberstein Mar 30 '11 at 07:06
Okay, try to debug it by using alert e.g. alert(e.which); . Check the text that is alerted and alter your if statement. (is there any javascript errors on page?; AND can you show me your html for the textarea section you are using) – Marc Uberstein Mar 30 '11 at 07:22
1

Okay miss read that one... use $('input:not(textarea)') . this will effect all text boxes and non of the textareas. (I will alter my answer) – Marc Uberstein Mar 30 '11 at 07:27
But it is always good to keep the enter active for textareas, incase you have to use a textarea - http://jsfiddle.net/F3pyZ/ if you disable the script the form will submit. (Did you manage?) – Marc Uberstein Mar 30 '11 at 07:53

score 0 · Answer 10 · edited Apr 03 '12 at 12:08

<script type="text/javascript">

   function stopRKey(evt) { 
     var evt = (evt) ? evt : ((event) ? event : null); 
     var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
     if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
   } 


document.onkeypress = stopRKey; 

</script>

http://webcheatsheet.com/javascript/disable_enter_key.php

disable enter key on specific textboxes

10 Answers10

Linked