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

标签 javascript html

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

我想要的是让我的 Javascript 代码检测用户选择何时包含在 span 元素内、与 span 元素重叠或包含整个 span 元素。我如何让 Javascript 检测用户何时选择了该 span 的全部或部分内容?

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

查看该线程的 JS Fiddle:http://jsfiddle.net/eT8NQ/

最佳答案

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

我已经 updated your fiddle ,现在它会正确返回一个 bool 值,无论元素的任何部分是否在您的选择中。

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

When true, containsNode() returns true when a part of the node is part of the selection.

When false, containsNode() only returns true when the entire node is part of the selection.

关于javascript - 如何查看用户选择是否在 HTML 范围内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39006748/

相关文章:

javascript - CORS POST 请求在普通 JavaScript 中工作,但为什么不使用 jQuery?

javascript - SP2013 - 在自定义网站中显示人员选择器

javascript - 使用 JS 在多边形上创建航路点

html - 将绝对元素定位到右边 :0 of document

python - 如何将 Python 的 urllib2.urlopen() 转换为文本?

html - 如何将 HTML 矩形框放置在页面的中心

javascript - 如何使用Js从用户那里获取CSS属性

html - 在 flex 容器中的文本上设置省略号

javascript - 使用数据属性和 jQuery 如何通过数据属性名称和数据属性值选择元素

javascript - AngularJS 循环不工作