Question

一旦用户选择了一些文本，我就会尝试在某些选定文本下显示一个工具栏。我浏览了很多stackoverflow的答案，我能想到的最好的是下面的代码。

我希望当用户不仅在鼠标点击上选择某些文字时，还要在键盘选择 （alt + shift +箭头键）上选择一些文字时触发工具栏。非常像this text editor。

getSelected()函数在鼠标或键盘选择上返回所选文本。但是当我在该范围内插入虚拟元素时，它总是插入（我添加了一些文本，“bar”，以查看虚拟插入的位置）在textarea顶部的虚拟对象。

我猜它与.getRangeAt(0)有关。我想得到所选文本的位置（插入虚拟<span>）。

function getSelected(){
  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;//.toString()
}

$('#post_content').on('select',function(){
    var range = getSelected().getRangeAt(0);
    range.collapse(false);
    var dummy = document.createElement("span");
    // dummy.innerHTML = "bar";
    range.insertNode(dummy);
    var rect = dummy.getBoundingClientRect();
    var x = rect.left, y = rect.top;
    dummy.parentNode.removeChild(dummy);
    alert(x + "/" + y);
});

查看JSFiddle：http://jsfiddle.net/aTq5q/

有什么想法吗？谢谢！

Answer 1

看起来你有两个问题：

Determining the X/Y coordinates of the caret in a text area
捕捉选择更改事件。

对于第一个问题，请查看Component.io textarea-caret-position plugin。小巧，简单，跨浏览，并且没有任何依赖关系 - demo 。

使用jQuery在所选文本下显示工具栏

1 个答案: