jQuery：如何通过标签名称而非ID标识选择内容文本

Question

我希望能够通过点击特定标签中的内容文本（如code）来选择它（以便复制粘贴）。

当标签没有ID时，我无法找到解决方案：

<p>When I click <code>this code</code> I want it to be selected.</p>
<p>The code tags don't have IDs or tag names.</p>
<p>Here's some <code>other code</code>.</p>

这种方法行不通：

$("code").click(function(){
    $(this).select();
});

看起来 select() 只适用于输入框和文本区域。

测试：http://jsfiddle.net/n6R3t/

- Martin

Answer 1

尝试使用这个由Jason Edelman在这个答案中分享的jQuery插件：

jQuery.fn.selectText = function(){
    var doc = document
        , element = this[0]
        , range, selection
    ;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

您可以按照以下方式使用它：

$('code').click(function() {
    $(this).selectText();
});

- Matt Browne

Answer 2

正如您所说，$.select() 方法只适用于输入框/文本区域。您需要使用 window.getSelection 和 document.selection（在旧版浏览器中）的组合。

$("code").click(function(){
    if (document.selection) {
        // older browsers
        var range = document.body.createTextRange();
        range.moveToElementText(this);
        range.select();
    } else if (window.getSelection) {
        // modern browsers
        var range = document.createRange();
        range.selectNode(this);
        window.getSelection().addRange(range);
    }
});

请查看代码片段：http://jsfiddle.net/derekaug/8Ax79/

- derekaug

Answer 3

.select() 触发一个选择事件。这是 JavaScript 的简写 .trigger("select")http://api.jquery.com/select/，所以你需要向你的代码添加一个事件处理程序，让它做任何事情，类似于你已经有的点击处理程序。

$("code").select(function(){选择后会发生什么});

在你的click代码之后添加它，它应该会响应。

- Jack Surine