32

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 ?

Sastrija
  • 3,284
  • 6
  • 47
  • 64
sat
  • 40,138
  • 28
  • 93
  • 102

5 Answers5

33

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.

William Troup
  • 12,739
  • 21
  • 70
  • 98
  • 6
    This will only work in IE: `window.event` is not supported in other browsers. – Tim Down Jan 20 '10 at 09:35
  • Doug Crockford told me to tell you to use === instead of ==. – MrBoJangles Jul 31 '14 at 17:28
  • if you write onkeypress="return onTestChange();" then original new line character will be left out. – MaksymB Feb 16 '15 at 14:26
  • 1
    Not very useful if you hit Enter and one or more lines already exists after the line. It will end up deleting all the lines after the new line. – Johann Mar 25 '19 at 15:24
  • To use in modern browsers, replace `onkeypress="onTestChange();"` with `onkeypress="onTestChange(event);"` and replace `function onTestChange() {` with `function onTestChange(e) {` and replace `var key = window.event.keyCode;` with `var key = e.keyCode` – Ethan O'Brien Feb 17 '22 at 17:29
17

Simply add this tad to your textarea.

onkeydown="if(event.keyCode == 13) return false;"
Jean-Pierre Vaillancourt
  • 179
  • 1
  • 2
8

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>
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • `evt = evt || window.event;` : What is this line for ? – Fifi Mar 14 '20 at 13:19
  • @Fifi: That's for old versions of Internet Explorer (8 and under, I think) that didn't pass the event as a parameter to the event hanbdler, instead using the global `window.event`. It's not necessary now. – Tim Down Mar 17 '20 at 11:29
3

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>";
    }
}
The_Fox
  • 6,992
  • 2
  • 43
  • 69
MuraliKrishna
  • 31
  • 2
1

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>
QuyPham
  • 27
  • 1