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

Question

JS Fiddle Demo

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>

JavaScript

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

期望的结果

1. 单击文本区域中的某处以放置光标。
2. 滚开，使光标不可见。
3. 点击“滚动到光标”按钮。
4. Textarea 滚动到光标所在位置

---

注意：我使用的是 jQuery。

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

我已经在下面图解了这个问题。将红线的长度（以像素为单位）传递给scrollTop 应该可以解决问题。但我不知道如何获得线的长度。

Answer 1

textarea.blur()
textarea.focus()

完成这项工作。

示例：https://jsfiddle.net/syy25x69/

要在 IE 中选择文本，请参阅：Set textarea selection in Internet Explorer

更新

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

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

另一个例子：https://jsfiddle.net/rk8cL174/

Answer 2

从 Jonathan Levine 的评论中，我意识到 this answer 对我有用。

Fiddle Demo

JavaScript

$('#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
*/

说明

当用户按键时，浏览器会做两件事：

1. 将键放在光标后的位置。
2. 滚动到该位置。

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

编辑：旧的解决方案不符合标准。 initKeyEvent 已弃用。该更新仅使用KeyboardEvent() 构造函数，该构造函数兼容并适用于除 IE 以外的所有浏览器（Safari 是一个问号）。

编辑 2：使用 $.event.trigger({ type : 'keypress' }); 代替 new KeyboardEvent() 效果一样好，适用于所有浏览器。

Answer 3

由于某些奇怪的原因，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);

Answer 4

这是我对事物的看法。

我发现 Audi Nugraha 的解决方案在测试时有效，但在 Electron 应用程序中尝试时无效。

一个对我有用的解决方案是将光标定位到开头，然后模糊/聚焦。

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

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

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