如何在textarea中滚动到光标的位置？

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. 点击textarea中的某处以放置光标。
2. 向外滚动，这样光标就不可见了。
3. 点击＆＃34;滚动到光标＆＃34;按钮。
4. Textarea滚动到光标位置

注意：我使用的是jQuery。

我能弄清楚如何滚动的唯一方法是使用jQuery＆＃39; s scrollTop 功能。它将滚动位置设置为＆＃34;在可滚动区域上方隐藏的像素数＆＃34;。

我已经说明了下面的问题。将红线的长度（以像素为单位）传递给scrollTop应该可以解决问题。但我无法弄清楚如何获得该线的长度。

Answer 1

根据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 2

出于某种奇怪的原因，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 3

这是我的事情。

我发现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();
}