如何获取在Javascript中单击的文本?

时间:2010-03-31 02:51:55

标签: javascript

有没有人知道用javascript来判断某些文字中鼠标点击的位置是否可行?我知道获取x,y坐标很容易,但我想要文本中的位置。

例如,如果我点击<p>foo bar</p>内部 我希望能够告诉点击是在第5个字符上/之后。或者foo b在点击之前,ar在点击之后。

顺便说一句,我也在使用jQuery,我对纯JS和使用jQ的解决方案感到满意。

提前致谢。

3 个答案:

答案 0 :(得分:1)

Javascript和浏览器不直接支持此功能,但您可以技术上将每个字符包装在一个范围内,并根据点击的范围进行操作:

<p>
    <span>f</span>
    <span>o</span>
    <span>o</span>
    <span> </span>
    <span>b</span>
    <span>a</span>
    <span>r</span>
</p>

如果有人真的试过这个,那就准备好用速龙吃掉了:p

答案 1 :(得分:1)

扩展codeka的答案和我的评论。 。 。试试这个(我假设你的目标p有id my_p):

(function() {
  var p = $('#my_p');
  var o_string = p.text();
  p.html('<span>' + o_string.split('').join('</span><span>') + '</span>');

  $('span', p).each(function(i) {
    $(this).data('MyIndex', i);
  }).click(function() {
    var char_index = $(this).data('MyIndex');
    if (char_index >= 5) {
      alert('You clicked after character 5!  Before: "' + o_string.substring(0, char_index) + '", After (inclusive): "' + o_string.substring(char_index) + '"');
    }
  });
})();

这是做什么的: 1.找到您需要按字符单击知识的段落,2。将该段落中的文本拆分为多个单字符跨度,3。通知其在字符串中的位置的每个单字符跨度,以及4 。为每个范围分配一个click()处理程序,它会显示有关范围的信息(包括char索引&gt; = 5的示例,并打印字符串的前后部分)。

当然你可能想把它放在$(document).ready(...)而不是匿名函数中;我不知道你是否有一个先决条件来激活这个检测。

答案 2 :(得分:0)

坦率地说,我不太喜欢对文本进行抄写和“跨越”。但是我不太确定你在寻找什么,如果你只需要点击这个单词并做dblclick而不是点击就行了,我有下一个代码:

$('*').dblclick(function(event){
    console.log((window.getSelection() || document.getSelection() || document.selection.createRange().text).toString());
    event.stopPropagation();
});

之后,您可以根据需要取消选择文本。 如果没有toString(),你将得到具有很多属性的对象,也可以研究它。