chọn tất cả văn bản trong div có thể chỉnh sửa nội dung khi nó tập trung/nhấp vào

Question

Tôi có div có thể chỉnh sửa nội dung như bên dưới.

<div style=" border:solid 1px #D31444" contenteditable="true">12 some text...</div> 

Điều tôi cần là khi tôi nhấp vào div, tất cả văn bản sẽ tự động được chọn. Bạn có thể cho tôi giải pháp được không?

Answer 1

Hãy thử điều này:

<div style=" border:solid 1px #D31444" contenteditable="true" onclick="document.execCommand('selectAll',false,null)">12 some text...</div> 

Answer 2

này sẽ làm điều đó. Bộ hẹn giờ có trong Chrome và Safari vì trong các trình duyệt đó, hành vi trình duyệt gốc chọn toàn bộ phần tử dường như kích hoạt sau sự kiện tiêu điểm, do đó sẽ ghi đè hiệu ứng của mã lựa chọn trừ khi bị hoãn cho đến sau sự kiện tiêu điểm:

var div = document.getElementById("editable"); 

div.onfocus = function() { 
    window.setTimeout(function() { 
     var sel, range; 
     if (window.getSelection && document.createRange) { 
      range = document.createRange(); 
      range.selectNodeContents(div); 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.body.createTextRange) { 
      range = document.body.createTextRange(); 
      range.moveToElementText(div); 
      range.select(); 
     } 
    }, 1); 
}; 

Answer 3

Sự cố với sự kiện focus trên div là sự cố không thể kích hoạt vì nó cho rằng không thể chỉnh sửa div. Nội dung có thể chỉnh sửa trong DOM được đánh dấu bằng tabindex trong nền, do đó, để div của bạn nhận được sự kiện onfocus, bạn cần khai báo rõ ràng thuộc tính 's tabindex. HTML:

<div style=" border:solid 1px #D31444" contenteditable="true" tabindex="1" onfocus="document.execCommand('selectAll',false,null)" >12 some text...</div> 

Điều đó sẽ hoạt động với onfocus.