Login/Register
Enter key in textarea
Asked Answered
Solved javascripttextarea
D

5

33

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 ?

Determiner answered 20/1, 2010 at 7:22 Comment(1)
Following the hint below , I got to the solution. – Determiner
P
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.

Propensity answered 20/1, 2010 at 7:35 Comment(5)
This will only work in IE: window.event is not supported in other browsers. – Woadwaxen
Doug Crockford told me to tell you to use === instead of ==. – Lynwoodlynx
if you write onkeypress="return onTestChange();" then original new line character will be left out. – Jeanettajeanette
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. – Bara
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 – Deonnadeonne
W
17

Simply add this tad to your textarea.

onkeydown="if(event.keyCode == 13) return false;"
Wilton answered 16/12, 2012 at 9:44 Comment(1)
Maybe you can expand upon this answer. It doesn't seem to work. – Melodics
W
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>
Woadwaxen answered 20/1, 2010 at 9:34 Comment(2)
evt = evt || window.event; : What is this line for ? – Im
@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. – Woadwaxen
N
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>";
    }
}
Nobody answered 2/11, 2011 at 12:36 Comment(0)
T
0

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>
Tellurian answered 24/2, 2016 at 9:10 Comment(1)
No jQuery he said – Carmelinacarmelita

© 2022 - 2024 — McMap. All rights reserved.