jQuery: add line break at cursor position when hitting Enter

Question

I have a form with a textarea (id = details).

Is there a way I can insert the HTML code for a line break (<br />) at the cursor position when hitting Enter within this textarea ?

I would only need this to get to work in IE.

<textarea class="input height120 elastic span12" name="details" id="details" onkeyup="countCharLimit(event)" onpaste="countCharLimit(event)"></textarea>

why would you need that? enter already does that for you :) – benomatis Mar 23 '14 at 14:05 — benomatis, Mar 23 '14 at 14:05
was just kidding above, have a look at my answer – benomatis Mar 23 '14 at 14:28 — benomatis, Mar 23 '14 at 14:28

score 7 · Accepted Answer · edited May 23 '17 at 12:30

7

Try this:

$('textarea').keypress(function (e){
    if(e.keyCode == 13){
        $('textarea').val($('textarea').val()+"<br />");
    }
});

You could try and fiddle with it here

EDIT: I realized this is adding a <br /> at the end only, after some more research, I found this solution:

$('textarea').keypress(function (e){
    if(e.keyCode == 13){
        e.preventDefault();
        this.value = this.value.substring(0, this.selectionStart)+"<br />"+"\n";
    }
});

Here is a fiddle for this one

Source (mostly): Insert text into textarea with jQuery

EDIT AGAIN: Looks like the OP wanted the text at the end to also be cleared, so I updated my code accordingly (for other's seeing this: check out the first edit of my relevant fiddle for the case you'd want to keep the remaining text).

edited May 23 '17 at 12:30

Community

1
1

answered Mar 23 '14 at 14:23

benomatis

5,536
7
36
59

Thanks, this would always insert it at the end of the content not at the cursor position, right ? – user2571510 Mar 23 '14 at 14:50
Thanks, this does enter the HTML code at the correct position but then copies my initial content again after that. – user2571510 Mar 23 '14 at 15:24
It still copies my initial content again after the line break. Without that it would be fine but this way it always looks like this in the end: myText
myText - I would then always have to delete the copy of my text from the end of the string. – user2571510 Mar 23 '14 at 15:37
what do you want?? explain better – benomatis Mar 23 '14 at 15:38
1

try removing the last (,this.value.length) .. it is optional and it could be the source of repeatition – stackunderflow Mar 23 '14 at 15:38
by the way i tested your solution and it is working perfect ... i tested it on the chrome.. i don't know if other browsers will give different effects – stackunderflow Mar 23 '14 at 16:48
thanks, dude, appreciate the feedback! hope the OP gets back here sooner or later and makes a selection... ;) – benomatis Mar 23 '14 at 17:05

score 2 · Answer 2 · edited May 23 '17 at 12:07

2

you will need to find the caret position first as follow:

    var caretPos = function() {
        var el = $("#details").get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }

taken from :here

then you do:

var textofDetails = $("#details").val();
jQuery("#detail").val(textofDetails.substring(0, caretPos) + "<br/>" + textofDetails.substring(caretPos) );

Major EDIT:

no need for all the above ; your function will be

function replaceNewLine(){

    jQuery("#detail").val().replace(/\\n/g, "<br />");
}

source: so - here

edited May 23 '17 at 12:07

Community

1
1

answered Mar 23 '14 at 14:48

stackunderflow

3,811
5
31
43

I am getting caretPos is undefined when I try this. I copied the above into my functions file and initiated it by click on a button. Anything else I need to do here ? – user2571510 Mar 23 '14 at 15:02
i edited the code please revise it .. hope it will work – stackunderflow Mar 23 '14 at 15:15
Thanks, unfortunately this doesnt do anything. Maybe it loses the caret position when I click the button ? – user2571510 Mar 23 '14 at 15:25
your major edit was what I tried with first, but the OP wants the `
` tag to appear at cursor position... I believe at least, as they weren't very precise in asking the question, additionally wanting to have the rest of the text (I guess what's after the cursor position) removed... – benomatis Mar 23 '14 at 16:09
No my major edit will replace any \n while your first trial was about appending trailing
at the end ;)..anyways i am waiting his reply to say weather it worked or not :) – stackunderflow Mar 23 '14 at 16:46

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

Yes, sure. It seems to be so, that you need keydown event processing and, possible, setTimeout 0 hack, look here: Why is setTimeout(fn, 0) sometimes useful?

edited May 23 '17 at 11:59

Community

1
1

answered Mar 23 '14 at 14:09

brutallord

861
2
11
16

jQuery: add line break at cursor position when hitting Enter

3 Answers3