Tôi có một dự án dùng PrismJs để hiện thị các loại ngôn ngữ lập trình trong bài viết, nhưng PrismJs không có hỗ trợ chọn tất cả nội dung để người đọc có thể copy một cách nhanh nhất, bài viết này sẽ hướng dẫn các bạn dùng mã JS để khi người dùng nhấp chuột vào trong nội dung của thẻ <pre></pre> thì sẽ tự động chọn tất cả.
Mã Javascript
(function() {
function selectText(element) {
var doc = document
, text = element
, range, selection
;
if (doc.body.createTextRange) { //ms
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { //all others
selection = window.getSelection();
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
preTags = document.getElementsByTagName('pre');
for(var i=0;i<preTags.length;i++) {
preTags[i].onclick = function() {selectText(this)};
}
})();Đoạn mã trên hoạt động với tất cả các khối nằm trong thẻ <pre></pre>. Nếu bạn muốn thay đổi thẻ chọn nội dung khác như div, p ... Bạn chỉ việc thay đổi dòng sau:
Ví dụ
preTags = document.getElementsByTagName('pre');