Jquery：有没有办法在单击 Div 时突出显示它的文本？答案

【问题标题】：Jquery: is there a way to highlight the text of a Div when you click on it?Jquery：有没有办法在单击 Div 时突出显示它的文本？
【发布时间】：2011-04-30 02:13:31
【问题描述】：

使用 Jquery 是否有一种方法可以突出显示/选择（例如，如果有人用鼠标选择它）我单击的 div 内的文本？不是文本框，只是一个普通的 div。

我正在尝试制作一个“短网址”框，当有人点击文本区域时，它会突出显示所有文本，但它也需要不允许人们更改文本框中的文本，但是当文本框已禁用您无法选择任何文本，所以我正在尝试这样做，我只是认为 div 最简单。

对不起，我一开始没有很好地解释我的意思，添加了上面的信息来澄清。

【问题讨论】：

在我通常的搜索中没有找到任何东西，你能不能把输入框的样式设置成看起来像你的 div？
你能解释一下你为什么要这样做吗？您只是希望更改背景颜色还是选择允许复制的文本。
好吧，我正在尝试制作一个“短网址”框，当有人点击文本区域时，它会突出显示所有文本，但它也需要不允许人们更改文本文本框，但是当文本框被禁用时，您无法选择任何文本，所以我正在尝试这样做，我只是认为 div 会最简单。
很好，我不知道我能做到这一点。我只是要使用文本框，与文本框相比，在页面上选择文本需要太多时间
android.nick，看看我的回答，它也有一个工作示例。

标签： jquery select click highlight

【解决方案1】：

您可以在元素被点击后修改其 CSS。类似（未经测试）：

$(".el").click( function() {

  $(".el").css( "color", "red" ).css( "background-color", "yellow" );

});

【讨论】：

虽然作者说的是“高亮”，但我怀疑他是想选择文本，让某人将整段文本复制到剪贴板。
好点子，在这种情况下，Mark B 下面的答案更重要

【解决方案2】：

$("div.myDiv").click(function() {
   $(this).css("background-color", "yellow");
})

或者你可以添加一个类：

$("div.myDiv").click(function() {
   if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
}

【讨论】：

【解决方案3】：

Working demo

如果您只谈论单击而不是在任何 div 中进行选择。应该是这样的：

$("div").click(function()
             {
                $(this).css({"background":"yellow"});
             });

【讨论】：

【解决方案4】：

为什么不直接使用 css：

div.<someclass>:focus {
    background:yellow;
}

【讨论】：

【解决方案5】：

选择由 DOM 中的范围对象定义 - 因此您必须使用它们（document.createRange 或 document.createTextRange）。请参阅此 SO 线程：Selecting text in an element (akin to highlighting with your mouse)

【讨论】：

【解决方案6】：

这是我前段时间整理的一个快速而肮脏的无 jQuery 代码 sn-p：

/*
 * Creates a selection around the node
 */
function selectNode(myNode){
    // Create a range
    try{ // FF
        var myRange = document.createRange();
    }catch(e){
        try{ // IE
            var myRange = document.body.createTextRange();
        }catch(e){
            return;
        }
    }

    // Asign text to range
    try{ // FF
        myRange.selectNode(myNode);
    }catch(e){
        try{ // IE
            myRange.moveToElementText(myNode);
        }catch(e){
            return;
        }
    }

    // Select the range
    try{ // FF
        var mySelection = window.getSelection();
        mySelection.removeAllRanges(); // Undo current selection
        mySelection.addRange(myRange);
    }catch(e){
        try{ // IE
            myRange.select();
        }catch(e){
            return;
        }
    }
}

它可以进行很多改进（我特别讨厌过多的 try...catch 块），但这是一个很好的起点。 “节点”是指 DOM 树中的一个项目。

【讨论】：

【解决方案7】：

对，这不是关于背景颜色，而是关于选择文本。

首先将输入设置为只读，阻止人们更改值：

<input type="text" readonly="readonly" value="ABC" />

然后使用 jQuery（或类似的）在文本被点击后选择它：

$('input').click(function() {
    $(this).select(); 
});

您应该为这个输入设置您认为合适的样式，也许是为了让它看起来像一段普通的文本，take a look at this jsFiddle 以进行进一步的演示。

【讨论】：

【解决方案8】：

您可以使用 textarea 而不是禁用它，而是使用 'readonly' 属性

<textarea name="selectable" readonly="readonly" />

【讨论】：