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

时间:2012-10-18 14:36:46

标签: javascript jquery html css highlight

前段时间我问了一个关于如何Highlight lines of text on mouseover的问题。但是,正如我用了一段时间,我注意到这个系统存在一些缺陷。其中一个是用户在切换到新标签/移动鼠标以执行其他操作后会忘记他们的位置。

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

我不知道这是否可行,因为我没有使用jQuery的经验。如果有人知道这样的剧本,或者有人可以给我写一个很棒的剧本!

非常感谢提前!

1 个答案:

答案 0 :(得分:1)

这是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小提琴 http://jsfiddle.net/gFTrS/8/

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