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

How do you scroll to the position of the cursor in a textarea?

提问by Adam Zerner

JS Fiddle Demo

JS小提琴演示

HTML

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

JavaScript

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

Desired Outcome

期望的结果

1. Click somewhere in the textarea to place cursor.
2. Scroll away so cursor isn't visible.
3. Click "Scroll to Cursor" button.
4. Textarea scrolls to the position of the cursor

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

---

---

Note: I'm using jQuery.

注意：我正在使用 jQuery。

The only way I could figure out how to scroll is to use jQuery's scrollTopfunction. It sets the scroll position to "the number of pixels that are hidden from view above the scrollable area".

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

I've diagrammed the problem below. Passing in the length of that red line (in pixels) to scrollTopshould do the trick. But I can't figure out how to get the length of the line.

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

采纳答案by Adam Zerner

From Jonathan Levine's comment, I realized that this answerworks for me.

从乔纳森莱文的评论中，我意识到这个答案对我有用。

Fiddle Demo

小提琴演示

JavaScript

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

Explanation

解释

When the user presses a key, the browser does two things:

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

1. Places the key in the position after the cursor.
2. Scrolls to that position.

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

This solution just simulates that (without actually entering any text).

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

Edit: The old solution isn't standards compliant. initKeyEventis deprecated. The update only uses the KeyboardEvent()constructor, which is compliant and works in all browsers except IE (Safari is a question mark).

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

Edit 2: Using $.event.trigger({ type : 'keypress' });instead of new KeyboardEvent()works just as well, and works in all browsers.

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

回答by Audi Nugraha

textarea.blur()
textarea.focus()

Does the job.

做这份工作。

Example: https://jsfiddle.net/syy25x69/

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

To select a text in IE see: Set textarea selection in Internet Explorer

要在 IE 中选择文本，请参阅：在 Internet Explorer 中设置文本区域选择

Update

更新

In order for this to work, I noticed that the selection must be collapsed. You can restore the selection later if you need to.

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

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

Another example: https://jsfiddle.net/rk8cL174/

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

回答by Manngo

This is my spin on things.

这是我对事情的看法。

I found that Audi Nugraha's solution worked when testing, but not when I tried it in an Electron application.

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

A solution which did work for me was to position the cursor to the beginning and then blur/focus.

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

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

I have incorporated the above into a function:

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

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