Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 522
sat Avatar asked Jan 20 '10 07:01

sat


People also ask

How do I get text from textarea?

Use the value property to get the value of a textarea, e.g. const value = textarea. value . The value property can be used to read and set the value of a textarea element. If the textarea is empty, an empty string is returned.

Why is KeyCode deprecated?

KeyCode was deprecated because in practice it was “inconsistent across platforms and even the same implementation on different operating systems or using different localizations.” The new recommendation is to use key or code .


5 Answers

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.

like image 85
williamtroup Avatar answered Oct 11 '22 23:10

williamtroup


Simply add this tad to your textarea.

onkeydown="if(event.keyCode == 13) return false;"
like image 24
Jean-Pierre Vaillancourt Avatar answered Oct 11 '22 21:10

Jean-Pierre Vaillancourt


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>
like image 32
Tim Down Avatar answered Oct 11 '22 23:10

Tim Down


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>";
    }
}
like image 34
MuraliKrishna Avatar answered Oct 11 '22 21:10

MuraliKrishna


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>
like image 1
QuyPham Avatar answered Oct 11 '22 21:10

QuyPham