javascript - 使用鼠标单击/箭头键突出显示行

标签 javascript jquery html css highlight

前一段时间我问了一个关于如何Highlight lines of text on mouseover的问题.然而,当我使用它一段时间后,我注意到这个系统有一些缺陷。其中之一是用户在切换到新选项卡/移动鼠标以执行其他操作后忘记了他们所在的位置。

这就是为什么我想做同样的事情,除了鼠标点击,或者更好的是,键盘上的箭头键。

我不知道这是否可行,因为我没有使用 jQuery 的经验。如果有人知道这样的脚本,或者有人可以给我写一个,那就太好了!

非常感谢!

最佳答案

这是jquert部分

$(document).ready(function() {
  $(".textWrapper").click(function(e) {
      var relativePos = e.pageY - this.offsetTop;
      var textRow = (Math.ceil(relativePos / 18) * 18) - 18;
      $(".highlight", this).css("top", textRow + "px");
      $(".highlight", this).show();
  });
});

当然还有 js fiddle http://jsfiddle.net/gFTrS/8/

对于箭头键,这有点棘手,因为我需要一种方法来计算段落中的行数

关于javascript - 使用鼠标单击/箭头键突出显示行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12957158/

相关文章:

单击时 HTML 元素未获得焦点

javascript - 按值获取单元格

javascript - 有没有办法在 VueJS 中缓存 API 响应

javascript - 使用 JavaScript 按顺序显示一系列颜色

javascript - 使用 document.write 添加 jQuery 本地后备

javascript - 如何禁用youtube提供的右键单击选项

javascript - OnClick 传递 url 参数

php - 将渲染的 HTML 保存为图像

jquery - 定位下拉菜单

javascript - 如何使用自定义外观列表隐藏列表下拉列表中的选择占位符