I have a form and textarea, I do auto submit for form after x seconds ... But every time auto submit is done the cursor jumps out of textarea ... so how can I keep the cursor after submitting in old position in texrarea ?

I have a form and textarea, I do auto submit for form after x seconds ... But every time auto submit is done the cursor jumps out of textarea ... so how can I keep the cursor after submitting in old position in texrarea ?

• javascript
• html

• without seeing the code, not much can be said. However. you could try to do .focus() to the textarea after the submit. – telex-wap Commented Sep 5, 2016 at 13:25
• it work , But i must to one click on mouse to can write ... when I write without one click on mouse nothing write because the Cursor not show on textarea without one click on mouse @telex-wap – code Commented Sep 5, 2016 at 13:55

3 Answers 3

In your auto submit code get the current position of the cursor in the textarea. You can do it with this function (where id is the id attribute of the textarea element):

function getCaretPosition(id) {
    var txt = document.getElementById(id);
    var startPos = txt.selectionStart;
    var endPos = txt.selectionEnd;
    return endPos;
}

Than store the the value somewhere (in localstorage for instance), and after the form submit restore the cursor position with this function:

function setCaretPosition(id) {
    var txt = document.getElementById(id);
    if(txt.createTextRange) {
      var range = txt.createTextRange();
      range.collapse(true);
      range.moveEnd('character', caretPos);
      range.moveStart('character', caretPos);
      range.select();
      return;
    }

    if(txt.selectionStart) {
      txt.focus();
      txt.setSelectionRange(caretPos, caretPos);
    }
}

where the caretPos is the cursor position stored before the submit. Here is simple demo to see how the functions work https://jsfiddle/p0oc8tjs/2/

Use the autofocus textarea attribute. Example:

<textarea autofocus></textarea>

This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.

If you still want to use script and set the last cursor position, than using sessionStorage you can do:

$.fn.getCursorPosition = function() {
    var el = $(this).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;
};
$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    };
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if(this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};
var textarea = $('.remember-cursor');
textarea.on('input click keyup', function(e) {
	sessionStorage.cursorPosition = textarea.getCursorPosition();
});
$(document).on('ready', function(e) {
    textarea.focus().selectRange( sessionStorage.cursorPosition );
});
$('button').on('click', function(e) {
	$(document).trigger('ready');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="remember-cursor">adsfsadfsad</textarea>
<button>Trigger DOM ready</button>

Thanks to this posts and answers:

• Cursor position in a textarea
• jQuery Set Cursor Position in Text Area

Also on JSFiddle.

Still, I do not think this is a correct way to do it. You should post your data via AJAX and collect results.

You can simple do this and this works just as I expected.

$("#textarea").val("").focus();

BTW I am using jquery, and val("") removes whatever the input we had given and moves the cursor to the start of the line.