Jquery：當點擊它時，是否有突出顯示Div文本的方法？

Question

使用Jquery有沒有一種方法來突出顯示/選擇（如果有人要用鼠標選中它）我點擊的div內的文本？不是一個文本框，只是一個普通的div。

我試圖做一個'短網址'框，當有人點擊textarea時，它突出顯示所有文本，但它也需要不允許人們改變文本框中的文本，但是當文本框被禁用，你不能選擇任何文本，所以我試圖做到這一點，我只是覺得div是最簡單的。

抱歉，我並沒有很好地解釋我的意思，補充說明。

Answer 1

對，這不是關於背景顏色，而是關於選擇文本。

首先設置的輸入爲只讀，阻止人們改變值：

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

然後使用jQuery（或類似）選擇的文本一旦它被點擊：

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

你應該風格這個輸入如你所見，或許可以讓它看起來像是一個普通的文字，take a look at this jsFiddle作進一步的演示。

Answer 2

您可以修改元素被點擊後的CSS。喜歡的東西（未經測試）：

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

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

}); 

Answer 3

$("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 4

Working demo

如果只講點擊任何DIV中不選擇。這將是這樣的：

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

Answer 5

見我的回答here（這反過來鏈接another answer）。

Answer 6

爲什麼不使用CSS：

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

Answer 7

的選擇是由DOM的範圍對象定義 - 所以你必須與他們（document.createRange或document.createTextRange）工作。看到這個SO螺紋：Selecting text in an element (akin to highlighting with your mouse)

Answer 8

這裏有一個快速和骯髒的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; 
     } 
    } 
} 

它可能使用了大量的改進（我特別討厭多如牛毛的嘗試...抓塊），但這是一個很好的起點。對於「節點」，我是指DOM樹中的一個項目。

Answer 9

您可以使用一個文本，而是將其禁用，使用「只讀」屬性

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