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

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. 单击textarea中的某个地方放置光标。
3. Scroll away so cursor isn't visible.
4. 向外滚动，使光标不可见。
5. Click "Scroll to Cursor" button.
6. 点击“滚动到光标”按钮。
7. Textarea scrolls to the position of the cursor
8. 文本区域滚动到光标的位置

---

Note: I'm using jQuery.

注意:我使用jQuery。

The only way I could figure out how to scroll is to use jQuery's scrollTop function. 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 scrollTop should do the trick. But I can't figure out how to get the length of the line.

我已经在下面画出了这个问题。将红线(以像素为单位)的长度传递到scrollTop应该很有用。但是我不知道怎么求这条线的长度。

2 个解决方案

#1

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中设置文本区域选择

#2

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

从乔纳森·莱文(Jonathan Levine)的评论中，我意识到这个答案对我很适用。

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. 将键放在光标之后的位置。
3. Scrolls to that position.
4. 滚动的位置。

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

这个解决方案只是模拟了这一点(实际上没有输入任何文本)。

Edit: The old solution isn't standards compliant. initKeyEvent is 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美元。触发器({类型:‘keypress’});而不是新的KeyboardEvent()，在所有的浏览器中都可以工作。