javascript - 自动提交后如何将光标保持在文本区域中的位置？

Question

我有一个表单和文本区域，我会在 x 秒后自动提交表单...但是每次自动提交完成时，光标都会跳出文本区域...那么如何在 texrarea 中的旧位置提交后保持光标？

Answer 1

在您的自动提交代码中获取光标在文本区域中的当前位置。您可以使用此函数(其中 id 是 textarea 元素的 id 属性):

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

然后将值存储在某处(例如在 localstorage 中)，并在表单提交后使用此函数恢复光标位置:

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);
    }
}

caretPos 是提交前存储的光标位置。这是一个简单的演示，可以了解这些功能是如何工作的 https://jsfiddle.net/p0oc8tjs/2/