Question

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

Answer 1

使用autofocus textarea属性。例如：

<textarea autofocus></textarea>

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

如果你仍然想使用脚本并设置最后一个光标位置，那么你可以使用sessionStorage：

＆＃13;

$.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');
});

＆＃13;

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

＆＃13;

感谢这些帖子和答案：

同样在JSFiddle。

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

Answer 2

在自动提交代码中，获取光标在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/

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

2 个答案: