How I can keep the cursor in its position in textarea after auto-submitting?

Question

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 ?

without seeing the code, not much can be said. However. you could try to do `.focus()` to the textarea after the submit. — telex-wap, Sep 05 '16 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, Sep 05 '16 at 13:55

score 3 · Accepted Answer · answered Sep 05 '16 at 14:30

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.net/p0oc8tjs/2/

It works well, but it would be neater to pass caretPos as a parameter to the setCaretPosition function, as in setCaretPosition(id,caretPos).... — DAB, Nov 21 '19 at 17:08

score 2 · Answer 2 · edited May 23 '17 at 10:33

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.com/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:

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.

it work but it put the Cursor on the start of textarea after submit @skobaljic — code, Sep 05 '16 at 13:59
I want to keeping the Cursor in old position after submit not want to put it in the start of textarea — code, Sep 05 '16 at 14:06
Best way would be to submit your data via AJAX and display results. You would keep resources, because there is no need to submit anything if no data has been changed. If you still want to focus the textarea and move cursor to the end of text (or to specific place), than there is no other way than using script. — skobaljic, Sep 05 '16 at 15:18

score 0 · Answer 3 · answered Apr 15 '23 at 14:55

0

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.

answered Apr 15 '23 at 14:55

mvalpha

38
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 18 '23 at 22:04

How I can keep the cursor in its position in textarea after auto-submitting?

3 Answers3