跨浏览器"跳转到" /"滚动"文本区域

时间:2020-03-06 14:57:02  来源:igfitidea点击:

我有一个包含许多行输入的textarea,并且触发了JavaScript事件,因此需要将textarea滚动到345行。

scrollTop可以满足我的要求,但据我所知它是像素级的,而我想要的是可以在行级上运行的东西。同样使事情复杂化的是,afaik再一次,不可能使textareas不换行。

解决方案

我们可以使用wrap属性停止包装。它不是HTML 4的一部分,但是大多数浏览器都支持它。
我们可以通过将区域的高度除以行数来计算线的高度。

<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中测试正常。