Jquery: có cách nào để làm nổi bật văn bản của Div khi bạn nhấp vào nó không?

Question

Với Jquery là có một cách để làm nổi bật/chọn (giống như nếu ai đó đã chọn nó với con chuột) văn bản bên trong của một div mà tôi bấm vào? không phải là một hộp văn bản, chỉ là một div bình thường.

Tôi đang cố gắng tạo hộp 'url ngắn', khi ai đó nhấp vào vùng văn bản, nó làm nổi bật tất cả văn bản nhưng cũng KHÔNG cần cho phép mọi người thay đổi văn bản trong hộp văn bản, nhưng khi hộp văn bản bị vô hiệu hóa bạn không thể chọn bất kỳ văn bản, vì vậy tôi đang cố gắng để làm điều đó, tôi chỉ nghĩ rằng một div sẽ được dễ nhất.

xin lỗi, tôi đã không làm tốt công việc giải thích ý tôi lúc đầu, hãy thêm thông tin ở trên để làm rõ.

Answer 1

Phải, đây không phải về màu nền, đó là chọn văn bản.

Đầu tiên thiết lập một đầu vào để chỉ đọc, ngăn cản mọi người thay đổi giá trị:

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

Sau đó, sử dụng jQuery (hoặc tương tự) để chọn văn bản khi nó đã được nhấp:

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

Bạn nên phong cách đầu vào này khi bạn thấy vừa vặn, có lẽ để làm cho nó trông giống như một đoạn văn bản bình thường, take a look at this jsFiddle để trình diễn thêm.

Answer 2

Bạn có thể sửa đổi CSS của phần tử sau khi nó đã được nhấp. Một cái gì đó tương tự (chưa được kiểm tra):

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

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

}); 

Answer 3

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

Hoặc bạn có thể thêm một lớp:

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

Answer 4

Working demo

Nếu bạn chỉ nói về cách nhấn và không chọn bên trong bất kỳ div. Nó sẽ giống như thế này:

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

Answer 5

Xem câu trả lời của tôi here (liên kết lần lượt đến another answer).

Answer 6

tại sao không chỉ sử dụng css:

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

Answer 7

Một lựa chọn được xác định bởi một đối tượng phạm vi trong DOM - vì vậy bạn phải làm việc với họ (document.createRange hoặc document.createTextRange). Xem này SO chủ đề: Selecting text in an element (akin to highlighting with your mouse)

Answer 8

Dưới đây là một jQuery-ít đoạn mã nhanh chóng và dơ bẩn tôi đặt lại với nhau một thời gian trước:

/* 
* 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; 
     } 
    } 
} 

Nó có thể sử dụng rất nhiều cải tiến (Tôi đặc biệt ghét quá phong phú của hãy thử ... bắt khối) nhưng đó là một điểm khởi đầu tốt. Với "nút", tôi có nghĩa là một mục từ cây DOM.

Answer 9

Bạn có thể sử dụng một textarea và thay vì tắt nó, sử dụng 'readonly' thuộc tính

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