2

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

然后在决定性的一天，jQuery 1.9发布了，它打破了他的代码和心。浏览器检测被降级为传说中的东西，再也不会被看到。因此，他寻找新的方法，并找到了Modernizr图书馆。这很酷，很彻底，看起来这就是他想要的。唉，事实并非如此。

该库缺少他想要的一项功能，即检测他的浏览器是否支持DOM Range对象。他被这个奇怪的疏忽弄糊涂了。当然，他在某个地方缺少什么。

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

4

3 回答 3

1

这段代码就够了吗？

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

if ( supportsRange ) {
    //
}
于 2013-02-26T13:17:19.997 回答
1

只需检测您需要什么。以下确实做出了一些假设（例如 Range 和 selection 方法的存在document.createRange()和暗示存在），但却是一个合理的折衷方案。window.getSelection()

演示：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();
    }
});
于 2013-02-27T09:55:41.947 回答
0

为了完整起见，这里是两个答案的更完整版本，包装为 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
于 2013-02-27T17:47:02.930 回答