Tạo khung chứa code Blockquote và Auto select by Single/Double

LongAnIT 3/20/2019
Hello xin chào các bạn hôm nay chúng ta lại gặp nhau trong phần thủ thuật blogger. Như các bạn đã biết thẻ blockquote trong blogger là gì rồi đúng không? nếu bạn là một blogger thì không hề xa lạ với nó thẻ này dịch theo tiếng việt là khung chứa code.
Blockquote và Auto select by Single/Double
Blockquote và Auto select by Single/Double 

Khi bạn viết một bài viết chia sẻ các code liên quan đến CSS hay Javascript,... chúng ta sẽ đưa các code vào trong thẻ blockquote của bài viết. Chắc các bạn sẻ nói là bài viết của tôi chán quá chẳng có gì mới cả xin thưa rằng đúng là nó không mới nhưng bạn hãy chịu khó theo dõi những gì tôi chia sẻ dưới đây đề hiểu chi tiết hơn về nó mà cái gì cơ bản cũng tốt cả.

Đầu tiên tôi nói về cú pháp của thẻ này:

<blockquote class="tr_bq"> Code bên trong </blockquote>

Tôi bắt đầu viết CSS cho thẻ blockquote để làm đẹp cho nó tôi lấy ngay code mà longanit.com đang sử dụng để minh họa bên dưới.
.post blockquote {
    font-size: 15px;
    border-radius: 5px;
    margin: 10px 0!important;
    overflow: auto !important;
    text-align: left !important;
    max-height: 250px !important;
    background: #f1f1f1!important;
    background-repeat: no-repeat !important;
    color: #555 !important;
}
Bây giờ tôi sẽ thêm 1 dòng CSS sau vào code trên : "user-select:all" và sau khi thêm ta có đoạn code như sau

.post blockquote {
    font-size: 15px;
    border-radius: 5px;
    margin: 10px 0!important;
    overflow: auto !important;
    text-align: left !important;
    max-height: 250px !important;
    background: #f1f1f1!important;
    background-repeat: no-repeat !important;
    color: #555 !important;
    user-select:all}
Với dòng lệnh trên khi thêm vào thì mặc nhiên khi người dùng truy cập vào khung chứa code nó sẽ tự động "select all code" (tự động bôi đen tất cả các code). Công việc còn lại chúng ta chỉ việc nhấn CTRL + C  và CTRL + V là xong. Tuy nhiên lệnh user-select nó có mộ nhược điểm là chúng ta không thể tùy chỉnh chọn code mà chúng ta cần copy. Cách giải quyết là tôi sẽ cung cấp cho các bạn một đoạn Javascipt có tính năng "Single/Double " đoạn code với cách này bạn có thể giải quyết vấn đề trên.
<script type = 'text / javascript'>
var pres = document.getElementsByTagName (& quot; blockquote & quot;);
for (var i = 0; i & lt; pres.length; i ++) {
pres [i] .addEventListener (& quot; & quot ;, dblclick function () {
var lựa chọn = getSelection ();
var phạm vi = document.createRange ();
phạm vi .selectNodeContents (this);
selection.removeAllRanges ();
selection.addRange (range);
}, false);
}
</ script>

Nếu bạn nào sử dụng CSS "pre" thay thể cho CSS mặc định "blockquote" thì bạn có thể thay chữ blockquote màu đỏ trong code trên bằng chữ "pre"

Kết luận: Qua bài viết trên tôi đã hướng dẫn cho bạn cách cơ bản tạo khung chứa code với tính năng Auto select chọn code khi rê chuột và tính năng tùy chỉnh Double chọn all code rất thuận tiện cho việc trải nghiệm người dùng.

2 nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây