CODEWITHSUNDEEP
jquery
user648276
user648276

Reputation:

disable enter key on specific textboxes

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, " "));
    });
});

Upvotes: 49

Views: 94451

Answers (10)

Debbie Kurth
Debbie Kurth

Reputation: 481

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();
}

Upvotes: 1

Ahsan K
Ahsan K

Reputation: 57

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.

Upvotes: 1

Nikunj Dhimar
Nikunj Dhimar

Reputation: 2386

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! :)

Upvotes: 3

Akshay
Akshay

Reputation: 354

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

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

Upvotes: 22

user1853583
user1853583

Reputation: 69

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);


});

Upvotes: 5

PHP Ferrari
PHP Ferrari

Reputation: 15616

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;
            }
        });
});

Upvotes: 15

ariel
ariel

Reputation: 9

<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

Upvotes: 0

polarblau
polarblau

Reputation: 17724

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

Upvotes: 7

Marc Uberstein
Marc Uberstein

Reputation: 12541

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)

Upvotes: 0

alex
alex

Reputation: 490153

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.

Upvotes: 53

Related Questions