Hướng dẫn
Quảng cáo

JavaScript: Chọn Tất cả nội dung của bất kỳ phần tử HTML nào

Bài này sẽ hướng dẫn các bạn dùng JavaScript để chọn tất cả nội dung của bất kỳ Phần tử HTML nào

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');

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Advertisements