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/

相关文章:

javascript - IE8 在显示 CSS 样式表时出现问题

javascript - 为 VsCode 配置 eslint 以支持类型声明文件?

javascript - 在不使用递归的情况下改进连续范围的子集和算法

带有 () 的 Javascript 语法 - 函数作用域

javascript - 将参数传递给 Blaze 模板

html - 用于测试 React 应用程序的 jest/enzyme 不提供页面标题,如何获取标题?

javascript - Paper.js 向量操作

javascript - 使按钮在奇数和偶数点击中以不同的方式工作

javascript - 如何在 jQuery 中使用 .css 函数

javascript - "Home"不是 Node JS 上的构造函数