jquery keyCode == 13 must remain at current place (but it goes to the end of the text)

Question

Here is example http://jsfiddle.net/omuL8doa/3/

If I press Enter, jquery inserts <br/> in current place. This is ok.

But after Enter I (cursor) goes to the end of the text. But I need that cursor remains in 'curent' place (the same behavior if I pres enter in Word or Notepad. I mean, press Enter, goes one line below and remains there.

What need to modify to the code?

Here is the code

$('textarea').keydown(function(ev){
if(ev.keyCode == 13){
var caretPos = document.getElementById("main_text").selectionStart;
var textAreaTxt = jQuery("#main_text").val();
var txtToAdd = "<br/>";
jQuery("#main_text").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
}
});

Possible duplicate: http://stackoverflow.com/questions/1891444/cursor-position-in-a-textarea-character-index-not-x-y-coordinates — mccannf, Aug 11 '14 at 19:12
take alook at this: http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area — meni181818, Aug 11 '14 at 19:13
Just add `ev.preventDefault()` to prevent an enter from actually happening. — royhowie, Aug 11 '14 at 19:15
@CraigPatrickLafferty - No one says the OP wants `\n`. This might be an HTML editor. — Derek 朕會功夫, Aug 11 '14 at 19:18
possible duplicate of [Insert text into textarea at cursor position (Javascript)](http://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript) — Derek 朕會功夫, Aug 11 '14 at 19:19

score 1 · Accepted Answer · answered Aug 11 '14 at 19:39

DEMO

$('textarea').keydown(function(ev){        
    if(ev.keyCode == 13){
        ev.preventDefault(); //added
        var caretPos = this.selectionStart;
        var textAreaTxt = this.value;
        var txtToAdd = "\n"; //changed
        $(this).val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
        var sePos = caretPos + txtToAdd.length //add
        this.setSelectionRange(sePos,sePos); //added
    }
});

score 0 · Answer 2 · answered Aug 11 '14 at 19:39

This may help

<script type='text/javascript'> 
    $(window).load(function(){
        $('textarea').keydown(function(ev){
            if(ev.keyCode == 13){

                obj = document.getElementById("main_text");
                $this = $(obj);
                txtToAdd = "<br/>";
                textAreaTxt = jQuery(obj).val();
                pos_start = obj.selectionStart;
                pos_end = obj.selectionEnd;

                val = (textAreaTxt.substring(0, pos_start) + txtToAdd + textAreaTxt.substring(pos_end));

                $("#main_text").val(val);

                obj.selectionStart = obj.selectionEnd = (pos_start + txtToAdd.length);

                ev.preventDefault();

            }
        });
    });
</script>

This is a simple idea, and there are lots of other codes here on stackoverflow.

jquery keyCode == 13 must remain at current place (but it goes to the end of the text)

2 Answers2