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

Posted 2023-05-07

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

【英文标题】：How I can keep the cursor in its position in textarea after auto-submitting?

【发布时间】：2017-01-12 20:37:11

【问题描述】：

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

【问题讨论】：

没看到代码，也没什么好说的。然而。您可以尝试在提交后对文本区域执行.focus()。

它可以工作，但我必须单击鼠标才能写...当我没有单击鼠标进行书写时，什么也没有写，因为没有单击鼠标@telex- 光标不会显示在 textarea 上交换

【参考方案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/

【讨论】：

感谢您的帮助...您的回答很有用@xxxmatko

它工作得很好，但是将 caretPos 作为参数传递给 setCaretPosition 函数会更简洁，如 setCaretPosition(id,caretPos)...。

【参考方案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 发布您的数据并收集结果。

【讨论】：

它可以工作，但在提交 @skobaljic 后它会将光标放在 textarea 的开头

我想在提交后将光标保持在旧位置不想把它放在 textarea 的开头

最好的方法是通过 AJAX 提交您的数据并显示结果。您将保留资源，因为如果没有更改任何数据，则无需提交任何内容。如果您仍然想聚焦文本区域并将光标移动到文本末尾（或特定位置），那么除了使用脚本之外别无他法。