HTML 文本区域；垂直滚动到文本答案

【问题标题】：HTML textarea; scroll vertically to textHTML 文本区域；垂直滚动到文本
【发布时间】：2010-03-24 11:02:03
【问题描述】：

我有一个 HTML 文本区域：

<textarea>
Some text
Another text in another line

BOOM

Hello there.
</textarea>

我希望能够垂直滚动到单词 BOOM 以使其可见（不管它出现在哪一行）。

这可能吗？

【问题讨论】：

标签： javascript jquery html textarea

【解决方案1】：

实际上有一种方法可以使用window.find() 和一些针对 IE 浏览器的变体。

这是我到目前为止的想法：

var gotoText = function(text) {
    function iefind(string) {
        var txt = document.body.createTextRange(); 
        if (txt.findText(string)) { 
            txt.scrollIntoView();
            txt.collapse(false);
        }
    }

    if(!window.find) { // ie
        iefind(text); 
        return;
    }

    // a double window.find() for backwards and forward search
    if(!window.find(text, false, true)){
       window.find(text, false, false);
    }
};

【讨论】：

请注意，没有计划将find 添加到标准中，因此可能并非在所有浏览器中都可用（假设这是准确的：developer.mozilla.org/en-US/docs/Web/API/Window/find）。

【解决方案2】：

$('textarea').animate({ 'scrollTop': 30 });

当然 30 正在为我自己的示例使用我的列和行。所以找到适合自己的价值。

自我说明：

无法计算特定单词所在的滚动高度，但是如果您将固定值设置为 css 行高，那么您可以从景气开启的角度来看故事，例如第 4 行则其滚动高度值为 4x (x:line-height) 但是我现在真的不想检查当有人放大浏览器时它会有多好。但值得一试，因为你有这种情况。

【讨论】：

但是我怎么知道BOOM是从顶部30？

【解决方案3】：

但我怎么知道 BOOM 距离顶部 30？

创建一个<div>，将其添加到页面并使用与<textarea> 对象完全相同的字体、white-space、尺寸、边框、填充和溢出来设置样式。将“BOOM”包裹在<span> 中，并测量span 相对于div 位置的位置。

（这不是很有趣。）

【讨论】：

【解决方案4】：

使用一些 javascript 是可能的！即使我迟到了，我希望它对其他人有用！

我在这里发表了一个答案：

http://blog.blupixelit.eu/scroll-textarea-to-selected-word-using-javascript-jquery/

它与 jsut 一个需要的规则完美配合：在 textarea 的 css 中设置一个 line-height！

它仅通过一些简单的数学计算来计算要滚动到的单词的位置，并且在我的所有实验中都能完美运行！

如果您对代码有任何需要，请随时问我！

【讨论】：

欢迎来到 Stack Overflow！感谢您发布您的答案！请务必仔细阅读FAQ on Self-Promotion。