chọn tất cả văn bản trong một div trên một nhấp chuột trái duy nhất với javascript

Question

tôi có một liên kết không nhấp được đơn giản trong một div trông như thế này:

Nó có nghĩa là một liên kết thể chia sẻ rằng người dùng có thể sao chép dán vào những thứ khác.

Đối với mục đích khả năng sử dụng, tôi muốn có một nhấp chuột duy nhất trái bất cứ nơi nào trong div để chọn toàn bộ liên kết:

Tôi không biết nhiều về, javascript/lập trình web, vì vậy tôi đã thử những điều sau đây :

<div id="share_link" onClick="select_all('share_link')"><%= request.url %></div> 

và javascript

này

<script type="text/javascript"> 
    function select_all(id) { 
     document.getElementById(id).focus(); 
    } 
</script> 

này không hoạt động. Tôi muốn biết điều đơn giản nhất tôi nên làm để đạt được những gì tôi muốn. Tôi nghĩ về việc thay đổi div thành đầu vào văn bản hoặc văn bản bên trong là một liên kết, nhưng lý tưởng là nội dung bên trong phải là chỉ đọc, không thể chỉnh sửa và không thể nhấp được

Answer 1

Bạn có thể sử dụng jQuery cho lĩnh vực đầu vào:

$("#myInputField").focus(function(){ 
    // Select input field contents 
    this.select(); 
}); 

Bạn có thể che giấu một thực tế rằng nó là một lĩnh vực đầu vào sử dụng thuộc tính readonly trong html:

<input type="text" name="country" value="Norway" 
    readonly="readonly" /> 

Và sử dụng CSS để thay đổi con trỏ vì vậy nó sẽ không gợi ý một nhập văn bản, ví dụ như:

cursor: crosshair; 

Answer 2

Điều này đạt được hoàn toàn khác trong IE so với các trình duyệt khác. Sau đây sẽ làm việc trong tất cả các trình duyệt chính:

<script type="text/javascript"> 
    function select_all(el) { 
     if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { 
      var range = document.createRange(); 
      range.selectNodeContents(el); 
      var sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") { 
      var textRange = document.body.createTextRange(); 
      textRange.moveToElementText(el); 
      textRange.select(); 
     } 
    } 
</script> 

<div onclick="select_all(this)">Link text</div>