Question

我有一个HTML textarea：

<textarea>
Some text
Another text in another line

BOOM

Hello there.
</textarea>

我希望能够垂直滚动到单词 BOOM ，以便它可见（它出现在哪一行无关紧要。）

这可能吗？

Answer 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);
    }
};

Answer 2

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

当然30正在用我的cols和行为我自己的例子工作。所以为自己找到合适的价值。

自我注意：

无法计算特定单词所在的滚动高度，但是如果您将固定值设置为css行高，那么您可以从繁荣开启的角度看故事，例如第4行然后它的滚动高度值是4x（x：行高）但是我现在真的不能去检查当有人放大浏览器时它会有多好用。但是你可以尝试一下。

Answer 3

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

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

（这不是很有趣。）

Answer 4

这可能与一些JavaScript！即使我迟到了，我希望它对其他人有用！

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

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

它与jsut一个必需的规则完美配合：在textarea的css中设置行高！

通过做一些简单的数学计算来计算滚动到的单词的位置，它在我的所有实验中都能很好地工作！

随时问我关于代码的任何内容！

HTML textarea;垂直滚动到文本

4 个答案: