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>

Houselights

why would you need that? enter already does that for you :) – Shirting

was just kidding above, have a look at my answer – Shirting

Answer 1

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).

Shirting

Thanks, this would always insert it at the end of the content not at the cursor position, right ? – Houselights

Thanks, this does enter the HTML code at the correct position but then copies my initial content again after that. – Houselights

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<br />myText - I would then always have to delete the copy of my text from the end of the string. – Houselights

what do you want?? explain better – Shirting

try removing the last (,this.value.length) .. it is optional and it could be the source of repeatition – Andonis

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 – Andonis

thanks, dude, appreciate the feedback! hope the OP gets back here sooner or later and makes a selection... ;) – Shirting

Answer 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

Andonis

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 ? – Houselights

i edited the code please revise it .. hope it will work – Andonis

Thanks, unfortunately this doesnt do anything. Maybe it loses the caret position when I click the button ? – Houselights

your major edit was what I tried with first, but the OP wants the <br> 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... – Shirting

No my major edit will replace any \n while your first trial was about appending trailing <br> at the end ;)..anyways i am waiting his reply to say weather it worked or not :) – Andonis

Answer 3

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?

Drawbar