javascript - 跨浏览器 "jump to"/"scroll"textarea

标签 javascript html css

我有一个包含多行输入的文本区域,并且触发了一个 JavaScript 事件,需要我将文本区域滚动到第 345 行。

scrollTop 可以做我想做的事,但据我所知它是像素级的,我想要在行级上运行的东西。让事情变得复杂的是,afaik 再一次,不可能使文本区域不换行。

最佳答案

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

关于javascript - 跨浏览器 "jump to"/"scroll"textarea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/155306/

相关文章:

html - 在JavaScript中设置动态创建的元素的`class`属性

html - Bootstrap 在输入字段旁边放置两个字形图标

javascript - 使用 Array.filter 比较两个数组并根据共同值推送到新数组

javascript - webpack froala无法读取未定义的属性'fn'#1312

html - 如何在不使用填充的情况下防止内容与固定导航栏重叠

php - 如何使用标题滚动到特定ID?

jquery - jQuery中的switchClass不起作用

javascript - 仅查找第一个匹配项,然后返回数组中的其余字符

javascript - 使用Javascript生成SASL MD5摘要以向Active Directory进行身份验证?

javascript - 如何使用单个脚本更改多个元素的样式?