Question

我想通过点击某些标签（例如code）来选择内容文字（准备好复制粘贴）。

我有一个ID，但是我的代码标签没有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()仅适用于输入和textareas。

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

Answer 1

试试这个jQuery插件，由Jason Edelman在this answer中分享：

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();
});

Answer 2

正如您所说，$.select()方法仅适用于输入/ textareas。您需要使用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/

Answer 3

.select()触发select事件。它是javascript .trigger("select") http://api.jquery.com/select/的简写，因此您需要为代码添加一个事件处理程序，以便它执行任何操作，类似于您已有的单击处理程序。

$("code").select(function(){your code for what happens on select});

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

jQuery：按标签名称标记（选择）内容文本，不带ID

3 个答案: