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

Posted 2023-03-06

【中文标题】jQuery：通过没有ID的标签名称标记（选择）内容文本

【英文标题】：jQuery: Mark (select) content text by tag name without ID

【发布时间】：2014-09-28 05:28:41

【问题描述】：

我想通过单击来选择某些标签中的内容文本，例如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/

【参考方案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 代码之后添加它，它应该会响应。