jQuery：通过没有ID的标签名称标记（选择）内容文本答案

【问题标题】：jQuery: Mark (select) content text by tag name without IDjQuery：通过没有ID的标签名称标记（选择）内容文本
【发布时间】：2023-03-19 13:37:01
【问题描述】：

我想通过单击来选择某些标签中的内容文本，例如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() 仅适用于输入和文本区域。

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

【问题讨论】：

标签： jquery select textselection

【解决方案1】：

正如您所说，$.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/

【讨论】：

【解决方案2】：

试试这个由 Jason Edelman 在this answer 分享的 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();
});

【讨论】：

【解决方案3】：

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

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

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

【讨论】：