跨浏览器“跳到”/“滚动” textarea [英] Cross browser "jump to"/"scroll" textarea

问题描述

我有一个textarea有许多行输入，并且JavaScript事件触发，需要我滚动textarea到345行。

I have a textarea with many lines of input, and a JavaScript event fires that necessitates I scroll the textarea to line 345.

scrollTop sort我做什么我想要的，除非我可以告诉它的像素级别，我想要的东西，在一个行级别操作。还有一件很复杂的事情是，再次，afaik不能使文本区域不换行。

scrollTop sort of does what I want, except as far as I can tell it's pixel level, and I want something that operates on a line level. What also complicates things is that, afaik once again, it's not possible to make textareas not line-wrap.

推荐答案

使用wrap属性进行包装。它不是HTML 4的一部分，但大多数浏览器支持它。

您可以通过将区域的高度除以行数来计算线的高度。

You can stop wrapping with the wrap attribute. It is not part of HTML 4, but most browsers support it.
You can compute the height of a line by dividing the height of the area by its number of rows.

<script type="text/javascript" language="JavaScript">
function Jump(line)
{
  var ta = document.getElementById("TextArea");
  var lineHeight = ta.clientHeight / ta.rows;
  var jump = (line - 1) * lineHeight;
  ta.scrollTop = jump;
}
</script>

<textarea name="TextArea" id="TextArea" 
  rows="40" cols="80" title="Paste text here"
  wrap="off"></textarea>
<input type="button" onclick="Jump(98)" title="Go!" value="Jump"/>

在FF3和IE6中测试OK。

Tested OK in FF3 and IE6.

这篇关于跨浏览器“跳到”/“滚动” textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！