Question

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

我正在尝试创建一个“短网址”框，当有人点击文本区时，它会突出显示所有文字，但它也不需要让人们更改文本框中的文字，但是当文本框时被禁用你不能选择任何文字，所以我想这样做，我只是觉得div是最简单的。

抱歉，伙计们我最初没有很好地解释我的意思，上面添加了相关信息以澄清。

Answer 1

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

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

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

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

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

您应该根据需要设置此输入的样式，或者使其看起来像普通的文本，take a look at this 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而不是禁用它，使用'readonly'属性

<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

Working demo

如果你只谈论点击而不是在任何div里面选择。它会是这样的：

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

Answer 7

为什么不使用css：

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

Answer 8

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

Jquery：当你点击它时有没有办法突出显示Div的文字？

8 个答案: