CODEWITHSUNDEEP
javascripttextarea
sat
sat

Reputation: 41076

Enter key in textarea

I have a textarea, On every Enter key pressed in textarea I want new line to be started with a bullet say (*). How to go about it ?

No jQuery please.

I can observe for the Enter key , after that !? Should I have to get the whole value of textarea and append * to it and again fill the textarea ?

Upvotes: 33

Views: 138158

Answers (5)

William Troup
William Troup

Reputation: 13131

You could do something like this:

<body>

<textarea id="txtArea" onkeypress="onTestChange();"></textarea>

<script>
function onTestChange() {
    var key = window.event.keyCode;

    // If the user has pressed enter
    if (key === 13) {
        document.getElementById("txtArea").value = document.getElementById("txtArea").value + "\n*";
        return false;
    }
    else {
        return true;
    }
}
</script>

</body>

Although the new line character feed from pressing enter will still be there, but its a start to getting what you want.

Upvotes: 33

QuyPham
QuyPham

Reputation: 25

You could do something like this:

$("#txtArea").on("keypress",function(e) {
    var key = e.keyCode;

    // If the user has pressed enter
    if (key == 13) {
        document.getElementById("txtArea").value =document.getElementById("txtArea").value + "\n";
        return false;
    }
    else {
        return true;
    }
});
<textarea id="txtArea"></textarea>

Upvotes: 0

Jean-Pierre Vaillancourt
Jean-Pierre Vaillancourt

Reputation: 179

Simply add this tad to your textarea.

onkeydown="if(event.keyCode == 13) return false;"

Upvotes: 17

MuraliKrishna
MuraliKrishna

Reputation: 31

My scenario is when the user strikes the enter key while typing in textarea i have to include a line break.I achieved this using the below code......Hope it may helps somebody......

function CheckLength()
{
    var keyCode = event.keyCode
    if (keyCode == 13)
    {
        document.getElementById('ctl00_ContentPlaceHolder1_id_txt_Suggestions').value = document.getElementById('ctl00_ContentPlaceHolder1_id_txt_Suggestions').value + "\n<br>";
    }
}

Upvotes: 3

Tim Down
Tim Down

Reputation: 324497

You need to consider the case where the user presses enter in the middle of the text, not just at the end. I'd suggest detecting the enter key in the keyup event, as suggested, and use a regular expression to ensure the value is as you require:

<textarea id="t" rows="4" cols="80"></textarea>
<script type="text/javascript">
    function formatTextArea(textArea) {
        textArea.value = textArea.value.replace(/(^|\r\n|\n)([^*]|$)/g, "$1*$2");
    }

    window.onload = function() {
        var textArea = document.getElementById("t");
        textArea.onkeyup = function(evt) {
            evt = evt || window.event;

            if (evt.keyCode == 13) {
                formatTextArea(this);
            }
        };
    };
</script>

Upvotes: 8

Related Questions