Question

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

scrollTop有点做我想要的，除了我可以告诉它的像素级别，我想要一些在线级操作的东西。令事情变得复杂的是，再一次，不可能使textareas不是换行。

Answer 1

您可以使用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中测试好。

Answer 2

如果使用.scrollHeight而不是.clientHeight，它将适用于显示高度有限且滚动条的textareas：

<script type="text/javascript" language="JavaScript">
function Jump(line)
{
  var ta = document.getElementById("TextArea");
  var lineHeight = ta.scrollHeight / 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"/>

Answer 3

在提及已接受的答案时需要考虑的事项：您可能未在rows中指定textarea属性，例如相反，您可能已使用CSS设置textarea的高度。

因此，引用ta.rows将无法按上述方式工作（默认情况下为2），因此您可以通过{{1}获取line-height textarea } / currentStyle甚至是jQuery的getComputedStyle，并执行以下操作：

.css()

跨浏览器“跳转到”/“滚动”textarea

3 个答案: