How to block entering carriage return in textarea?

Question

How do I block entering carriage return, new line, single quotes and double quotes in a textarea using asp.net mvc, during the key press event?

You're going to get much more help if you A) write in complete sentences, and B) show that you have tried to solve your problem. http://www.google.com/search?q=javascript+prevent+certain+characters+from+being+entered — Nick ODell, May 19 '11 at 01:09
@Nick ODell - Thats not true Nick. A) Not everybody has a complete mastery of the english language, his question was easy enough to understand for @Tim to edit. B) No question is too trivial. — John Farrell, May 19 '11 at 04:45

score 31 · Accepted Answer · answered May 19 '11 at 06:32

31

You could use jquery and subscribe for the .keypress() event of the textarea:

$('textarea').keypress(function(event) {
    // Check the keyCode and if the user pressed Enter (code = 13) 
    // disable it
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

answered May 19 '11 at 06:32

Darin Dimitrov

1,023,142
271
3,287
2,928

4

FWIW: if you don't want to use the `keypress` event, you can suppress the enter key's effects by using `.preventDefault()` during the `keydown` event. by the time it hits the `keyup` event, the carriage return has already been entered. – Jason Feb 09 '13 at 21:59
8

I don't really see why this is the ultimate solution. What if you paste? The ultimate solution is to run this function when you submit the form so it's checked once, not every single time you type into it. This just seems like a waste. – The Muffin Man Jul 13 '13 at 20:54
@TheMuffinMan you can adapt the solution from Darin Dimitrov by listening to multiple events, in the case of your objection the "change" event is triggered and you can check the text pasted or dragged inside it to find carriage returns. – yodabar Aug 23 '15 at 21:40
are you using == on purpose, or is it working the same way if I use ===? – Mafii Sep 21 '17 at 09:32
@Mafii there is a big difference between `===` and `==` operators. The first is a **strict comparison operator** and returns true if either the _value_ or the _type_ of the variables compared are exactly the same. The second is a **loose comparison operator**, which only checks the value, but requires an overhead of typecasting to workout the value, as in `"345" === 345`, so it is a bit slower and leaves to the data sources a certain control over the outcome of the comparison. I suggest you to take a look at this: https://stackoverflow.com/questions/523643/difference-between-and-in-javascript – yodabar Apr 11 '18 at 15:42
@EmanueleDelGrande I am very aware of this, that's why I asked. I was unsure wheter the same code would also work consistently with the `===` operator. – Mafii Apr 11 '18 at 17:44
1

@Mafii Yes, it works consistently as `event.type` and `event.which` return respectively a string and an integer. But what matters most, you want your code work the way you state in the event handler when those properties have exactly the values you expect. In any other case you avoid uncertain results and debugging is easier. I adopt strict comparison instead of the loose one where it would also be possible since years, and I can say I had only advantages. – yodabar Apr 11 '18 at 19:29

score 3 · Answer 2 · answered Aug 24 '15 at 01:08

To be comfortable with text modification caused by user's drag and drop of other text/elements inside the textarea or by pasting text inside it, it is necessary listening at the change event, too.

Moreover, I suggest to use the .on() method, available since jQuery 1.7, and to detect the enter key pressed by the user through the event.which property of the event object, to have a solid cross-browser behaviour of your app:

var $textarea = $('#comment');
// events to bind:
$textarea.on('keydown keyup change focus blur', function(e) {
    if (e.type === 'change') {
        // this event is triggered when the text is changed through drag and drop too,
        // or by pasting something inside the textarea;
        // remove carriage returns (\r) and newlines (\n):
        $textarea.val($textarea.val().replace(/\r?\n/g, ''));
    }
    if (e.which === 13) {
        // the enter key has been pressed, avoid producing a carriage return from it:
        e.preventDefault();
    }
});

How to block entering carriage return in textarea?

2 Answers2