Question

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

我正在尝试制作一个简短的url框，当有人点击文本区域时，它会突出显示所有文本，但它也需要不允许人们更改文本框中的文本，但当文本框被禁用时，你不能选择任何文本，所以我正在试着这样做，我只是认为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

您可以使用文本区域，而不是禁用它，而是使用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;
        }
    }
}

它可能需要很多改进（我特别讨厌过多的尝试…接球盖帽），但这是一个很好的起点。对于“node”，我指的是DOM树中的一个项。

Answer 6

工作演示

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

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

Answer 7

为什么不直接使用css：

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

Answer 8

选择是由DOM中的范围对象定义的，因此您必须使用它们（document.createRange或document.createTextRange）。请参阅此so线程：选择元素中的文本（类似于用鼠标高亮显示）

友情链接