0

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

我希望工具栏在用户不仅在鼠标单击而且在键盘选择 （alt+shift+箭头键）上选择一些文本时触发。很像在这个文本编辑器中。

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

我猜这与.getRangeAt(0). 我想获取所选文本的位置（插入 dummy <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/

有任何想法吗？谢谢！

4

1 回答 1

1

看起来你有两个问题：

  1. 确定文本区域中插入符号的 X/Y 坐标
  2. 捕获选择更改事件。

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

于 2014-03-17T12:18:27.083 回答