Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove line break from textarea

I have a textarea like this:

<textarea tabindex="1" maxlength='2000' id="area"></textarea>

I watch this textarea with jquery:

$("#area").keypress(function (e) {
    if (e.keyCode != 13) return;
    var msg = $("#area").val().replace("\n", "");
    if (!util.isBlank(msg))
    {
        send(msg);
        $("#area").val("");
    }
});

send() submits the message to the server if the return key was pressed and if the message is not blank or only containing line spaces.

The problem: After sending the message, the textarea is not cleared. On the first page load, the textarea is empty. Once a message was submitted, there is one blank line in the textarea and I don't know how to get rid of it.

like image 559
user478419 Avatar asked Dec 13 '10 14:12

user478419


People also ask

How to remove new line in textarea JavaScript?

Javascript Code for Line Break Removal someText = someText. replace(/(\r\n|\n|\r)/gm,""); The second piece of code with the javascript replace method removes all three types of line breaks by using this bit of a regular expression: \r\n|\n|\r.

How do you insert a line break in textarea?

To add line breaks to a textarea, use the addition (+) operator and add the \r\n string at the place where you want to add a line break, e.g. 'line one' + '\r\n' + 'line two' . The combination of the \r and \n characters is used as a newline character.

How to remove line breaks from string in JavaScript?

Use the String. replace() method to remove all line breaks from a string, e.g. str. replace(/[\r\n]/gm, ''); . The replace() method will remove all line breaks from the string by replacing them with an empty string.


2 Answers

The problem is that the Enter keypress is not being suppressed and is doing its usual browser behaviour (i.e. adding a line break). Add return false to the end of your keypress handler to prevent this.

$("#area").keypress(function (e) {
    if (e.keyCode != 13) return;
    var msg = $("#area").val().replace(/\n/g, "");
    if (!util.isBlank(msg))
    {
        send(msg);
        $("#area").val("");
    }
    return false;
});
like image 115
Tim Down Avatar answered Sep 24 '22 13:09

Tim Down


Thomas, the e.preventDefault(); would need to be wrapped inside a conditional applying it only to the enter key.

// Restrict ENTER.
if (e.keyCode == '13') { e.preventDefault(); }

The whole function would look something like this (with commenting):

// Key Press Listener Attachment for #area.
$("#area").keypress( function (event) {

    // If the key code is not associated with the ENTER key...
    if (event.keyCode != 13) {

        // ...exit the function.
        return false;

    } else {

        // Otherwise prevent the default event.
        event.preventDefault();

        // Get the message value, stripping any newline characters.
        var msg = $("#area").val().replace("\n", "");

        // If the message is not blank now...
        if (!util.isBlank(msg)) {

            // ...send the message.
            send(msg);

            // Clear the text area.
            $("#area").val("");

        }

    }

} );
like image 30
user721277 Avatar answered Sep 22 '22 13:09

user721277