JavaScript:在 Chrome 中使用 textarea.setSelectionRange 后滚动到选择

Question

JavaScript 函数使用 .setSelectionRange() 选择文本区域中的特定单词。

在 Firefox 中，文本区域会自动向下滚动以显示所选文本。在 Chrome (v14) 中，它没有。有没有办法让 Chrome 将文本区域向下滚动到新选择的文本？

欢迎使用 jQuery 解决方案。

Answer 1

这是一个简单而高效的纯 JavaScript 解决方案:

// Get the textarea
var textArea = document.getElementById('myTextArea');

// Define your selection
var selectionStart = 50;
var selectionEnd = 60;
textArea.setSelectionRange(selectionStart, selectionEnd);

// Mow let’s do some math.
// We need the number of characters in a row
var charsPerRow = textArea.cols;

// We need to know at which row our selection starts
var selectionRow = (selectionStart - (selectionStart % charsPerRow)) / charsPerRow;

// We need to scroll to this row but scrolls are in pixels,
// so we need to know a row's height, in pixels
var lineHeight = textArea.clientHeight / textArea.rows;

// Scroll!!
textArea.scrollTop = lineHeight * selectionRow;

把它放在一个函数中，用它扩展 JavaScript 的 Element 对象的原型(prototype)，就可以了。