自动提交后如何将光标保持在 textarea 中的位置？

Question

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

Answer 1

在您的自动提交代码中，获取光标在textarea 中的当前位置。你可以用这个函数来做（其中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/

Answer 2

使用autofocus textarea 属性。示例：

<textarea autofocus></textarea>

这个布尔属性允许你指定一个表单控件应该 页面加载时具有输入焦点，除非用户覆盖它， 例如，通过键入不同的控件。只有一个表单关联 文档中的元素可以指定此属性。

如果您仍然想使用脚本并设置最后一个光标位置，而不是使用sessionStorage，您可以这样做：

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

感谢这个帖子和答案：

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

同样在JSFiddle。

不过，我不认为这是正确的做法。您应该通过 AJAX 发布您的数据并收集结果。