Question

是否有可能将div放在所选文本的末尾，如弹出/工具提示？正在页面上选择文本，而不是在输入或文本区域中选择。

编辑：我想我需要澄清一下，我已经有了textselect事件，我只是想确定所选文本的位置。

EDIT2：我意识到事件本身有pageX和pageY cooridnates，所以我只能抓住它并用它来定位我的弹出窗口

Answer 1

jquery select事件仅限于输入和textarea。

没有简单的方法来检测整个文档上的select event。尽管IE有一个在所有元素上实现的select事件，但其他浏览器只有输入。但您可以通过处理页面上的keyup和mouseup事件来实现。

这是一个例子：

example.Selector = {};
 //each browser has a paricular getSelection .
example.Selector.getSelected = function(){
  var t = '';
  if(window.getSelection){
    t = window.getSelection();
  }else if(document.getSelection){
    t = document.getSelection();
  }else if(document.selection){
    t = document.selection.createRange().text;
  }
  return t;
}

//bind a mouseup event handler to document
example.Selector.mouseup = function(){
  var st = example.Selector.getSelected();
  if(st!=''){ 
     //display yout tooltip or popup here

  }
}

$(document).ready(function(){
  $(document).bind("mouseup", example.Selector.mouseup);
});

这是一个工作示例http://jsfiddle.net/chemouna/k6yVC/

Answer 2

将要放置弹出窗口的文本的偏移顶部取下，然后按弹出窗口的高度减小它 http://jsfiddle.net/UuGtm/3/

$("#popup").css("top",parseInt($("#text").offset().top)-parseInt($("#popup").height());

Answer 3

很抱歉，我没有时间写完整篇文章，但您可以使用mouseup事件监听器与window.getSelection()的某种组合来抓取鼠标选中的文本。从那里你可以找到它的父元素，并附加一个绝对定位靠近所选文本的div。

在所选文本末尾的顶层（如弹出/工具提示）上定位div

3 个答案: