Question

曾经有一个人写过一个脚本，让他对跨度内容进行“一键选择”。他的代码依赖于全能的 $ ，使用jQuery的浏览器检测。它就像一个魅力。

然后是一个重要的日子， jQuery 1.9 被释放了，打破了他的代码，心脏。浏览器检测被降级为传说中的东西，永远不会被再次看到。所以他寻求新的方式，他找到了 Modernizr 图书馆。这很酷，很彻底，看起来就像他想要的那样。唉，事实并非如此。

该库缺少他想要的 one 功能，如果他的浏览器支持 DOM Range 对象，则会检测功能。他被这种奇怪的疏忽迷住了。当然，他某处遗漏了某些东西。

你能帮他找到适合 DOM范围进行特征检测的工具吗？

Answer 1

此代码是否足够？

var supportsRange = typeof Range === 'object' && typeof document.createRange === 'function' && typeof Selection === 'object' &&  typeof Selection.prototype.getRangeAt === 'function';

if ( supportsRange ) {
    //
}

Answer 2

只需检测您的需求即可。以下确实做了一些假设（例如document.createRange()和window.getSelection()的存在意味着存在Range和选择方法），但这是一个合理的折衷。

演示：http://jsfiddle.net/dCvgU/

代码：

$("span").click(function() {
    var body = document.body, range, sel;
    if (typeof document.createRange != "undefined" &&
            typeof window.getSelection != "undefined") {
        range = document.createRange();
        range.selectNode(this);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof body.createTextRange != "undefined") {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
});

Answer 3

为了完整起见，这里是两个答案的更完整版本，包装为jquery插件。该插件支持所有主流浏览器。

（它在coffescript中，对于js代码，前往js2coffee）

$.fn.selectText = () ->
  @each ->
    text = this
    # FF, Chrome, IE9+, and hopefully Opera
    if document.createRange? and window.getSelection?
      selection = window.getSelection()
      range = document.createRange()
      range.selectNodeContents text
      selection.removeAllRanges()
      selection.addRange range
    # <= IE8
    else if document.body.createTextRange?
      range = document.body.createTextRange()
      range.moveToElementText text
      range.select()
    # Safari
    else if window.getSelection?
      selection = window.getSelection()
      selection.setBaseAndExtent text, 0, text, 1

功能检测支持DOM范围（Modernizr）

3 个答案: