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

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. 文本区域滚动到光标位置

---

注意:我使用的是 jQuery。

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

我在下面绘制了问题图解。将该红线的长度(以像素为单位)传递给 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/