Javascript 如何滚动到文本区域中光标的位置？

HTML

<textarea rows='5'>
sdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadj
</textarea>

<br />
<button id='scroll-to-cursor'>Scroll to Cursor</button>

期望的结果

单击文本区域中的某个位置以放置光标

滚动开，使光标不可见

单击“滚动到光标”按钮

text区域滚动到光标的位置

---

注意：我使用的是jQuery

我知道如何滚动的唯一方法是使用jQuery的 功能。它将滚动位置设置为“可滚动区域上方视图中隐藏的像素数”

我已经在下面画出了这个问题的图表。将红线的长度（以像素为单位）传递到

scrollTop

应该可以做到这一点。但我不知道怎么计算线的长度

---

从乔纳森·莱文的评论中，我意识到这对我很有用

JavaScript

$('#scroll-to-cursor').on('click', function() {
    // ?
});

$('#scroll-to-cursor').on('click', function() {    
    $('textarea').focus();
    $.event.trigger({ type : 'keypress' }); // works cross-browser

    // new KeyboardEvent('keypress'); // doesn't work in IE and Safari

    /* var evt = document.createEvent('KeyboardEvent');
    evt.initKeyEvent('keypress', true, true, null, false, false, false, false, 0, 32);
    $textarea.dispatchEvent(evt);

    evt = document.createEvent('KeyboardEvent');
    evt.initKeyEvent('keypress', true, true, null, false, false, false, false, 8, 0);
    $textarea.dispatchEvent(evt); */
});

/*
    To test:
    1) Click somewhere in the textarea to place cursor
    2) Scroll away so cursor isn't visible
    3) Click "Scroll to Cursor" button
*/

解释

当用户按键时，浏览器会执行两项操作：

将关键点放置在光标后的位置

滚动到那个位置

这个解决方案只是模拟了这一点（没有实际输入任何文本）

编辑：旧解决方案不符合标准。不推荐使用。该更新只使用构造函数，该构造函数是兼容的，适用于除IE之外的所有浏览器（Safari是一个问号）

编辑2：使用

$.event.trigger（{type:'keypress'}）

而不是

newkeyboardevent（）

同样适用于所有浏览器

textarea.blur()
textarea.focus()

他做这项工作

例如：

要在IE中选择文本，请参见：

更新

为了让它工作，我注意到选择必须折叠。如果需要，您可以稍后恢复选择

// collapse selection here
textarea.blur()
textarea.focus() // this scrolls the textarea
// expand selection here

---

另一个例子：

这是我对事物的看法

我发现奥迪Nugraha的解决方案在测试时有效，但在电子应用中尝试时无效

对我来说，一个可行的解决方案是将光标定位到起始位置，然后进行模糊/聚焦

textarea.selectionEnd = textarea.selectionStart = position;
textarea.blur();
textarea.focus();

我已将上述内容合并到一个函数中：

function scrollTextarea(textarea,position) {
    textarea.selectionEnd = textarea.selectionStart = position;
    textarea.blur();
    textarea.focus();
}

---

出于某种奇怪的原因，Chrome只在文本框上有插入符号时才会滚动，而在选择处于活动状态时不会滚动，因此如果需要滚动到选择，请执行以下小技巧：

  // set the single caret first
  textarea.setSelectionRange(index, index);

  // focus the textarea box so the scroll happens
  textarea.focus();

  // now do the selection
  textarea.setSelectionRange(index, index + x);

---

链接会起作用吗？在webkit浏览器中，您可以简单地重新调整textarea的焦点，使其回到光标位置。在IE/Firefox中不起作用though@JonathanLevine它确实起作用了，谢谢！乍一看，我看到它是用于输入和水平滚动的，所以我不认为它适用，但我只是测试了它，它确实有效。我对向右箭头和向左箭头有相同的想法，但你的想法更好，因为使用箭头键会改变文本末尾的光标位置；-）

按键在这里是不相关的，即使你注释掉了那一行，这也是有效的：现在发生的是点击按钮会模糊文本区域，而重新聚焦文本区域则会将光标滚动到视图中。textarea不是
$.event.trigger（{type:'keypress'}）的参数，您不觉得奇怪吗？解释为什么应该这样做-这也将有助于社区其他成员了解您是如何解决此问题的。对于已经接受答案的问题，这一点尤其重要-必须清楚为什么还应该考虑你的答案。它会模糊/聚焦textarea并将光标放在textarea的末尾，因此它会将textarea滚动到末尾，而不是光标所在的位置。那是wrong@llamerr事实上，它不会-如果没有失去字段的焦点，光标将保持在它的位置place@tomaszstryjewski它现在确实可以工作（至少在当前Chrome的Mac上是这样），但在我测试它的时候（2017年2月15日在Linux上的Chrome上），我相信它可以像我描述的那样工作（我无法轻松找到并下载当天的Chrome版本）在使用
setSelectionRange