如何查看用户选择是否在HTML范围内

时间:2016-08-17 21:44:07

标签: javascript html

我正在开发一个Firefox插件,可以通过用户选择转换使用突出显示的屏幕温度。转换后,用户选择将替换为span HTML元素,其ID为alreadyconverted,其中包含原始温度和转换后的温度。代码中一个明显的故障是用户可以通过并选择转换后的温度并无限转换它。

我想要的是我的Javascript代码检测何时用户选择包含在span元素中,重叠span元素或包含整个span元素。当用户完全或部分选择span时,如何检测Javascript?

我在StackOverflow上看到了类似的问题,但它想知道用户选择何时完全包含在某个元素中。这不完全是我想要的,但我不确定我需要在代码中进行哪些更改以使其符合我的需要。

查看该小组的JS小提琴:http://jsfiddle.net/eT8NQ/

1 个答案:

答案 0 :(得分:3)

查看MDN的Select文档,似乎已经直接支持此功能。请参阅Selection.containsNode()

updated your fiddle,现在它正确地返回一个布尔值,无论元素的任何部分是否在你的选择中。

function elementContainsSelection(el) {
  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.rangeCount > 0) {
      return sel.containsNode(el, true);
    }
  }
  return false;
}

除非设置了aPartlyContained标志,否则此函数默认返回false。然后部分遏制也将返回true。

  

aPartlyContained

     

如果为true,则containsNode()在返回时返回true   节点是选择的一部分。

     

如果为false,则仅包含containsNode()   当整个节点是选择的一部分时返回true。