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

Question

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

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

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

Answer 1

是的，这与背景颜色无关，而是与选择文本有关。

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

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

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

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

您应该根据需要设置此输入的样式，也许可以使其看起来像普通的文本，看看这个 jsFiddle 以获得进一步的演示。

Answer 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");
   }
}

Answer 3

单击元素后，您可以修改该元素的 CSS。像（未经测试）的东西：

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

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

});

Answer 4

您可以使用文本区域，而不是禁用它，而是使用“只读”属性

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

Answer 5

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

/*
 * 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 树中的一个项目。

Answer 6

工作演示

如果您只谈论单击而不是在任何内容中进行选择分区它会是这样的：

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

Answer 7

为什么不直接使用CSS：

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

Answer 8

选择是由 DOM 中的范围对象定义的 - 因此您必须使用它们（document.createRange 或 document.createTextRange）。请参阅此线程： Selecting text in一个元素（类似于用鼠标突出显示）