Người dùng Chọn các bản sao còn lại vào clipboard

Question

Tôi vừa phát hiện thuộc tính user-select của CSS. Tôi đã muốn tìm một cách để mọi người sao chép các kết quả được hiển thị trên một trang, mà không cần sao chép các tiêu đề (và một số thứ khác). Mỗi trình duyệt hơi khác một chút khi họ cố gắng chọn thứ gì đó. Nhưng tôi đã thử nghiệm chủ yếu trong Chrome. Fiddle Code

HTML

<div> 
    <span class="no-select heading">Heading 1 - can't select it</span> 
    <p>This text you can select & copy.</p> 
    <span class="no-select heading">Heading 2 - can't select it</span> 
    <p>This text you can select & copy.</p> 
</div> 

CSS

.no-select { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -moz-user-select: -moz-none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

Kết quả:

Đối với tôi, nó trông giống như họ sẽ chỉ có thể sao chép văn bản nhấn mạnh. Tuy nhiên, khi sao chép nội dung được đánh dấu - nó có heading 2, nhưng nó không sao chép heading 1. Tại sao điều này?

This text you can select & copy. 

Heading 2 - can't select it 
This text you can select & copy. 

Answer 1

tôi không thực sự nghĩ rằng tất cả những gì đáng ngạc nhiên, các user-select tài sản của mình là để ngăn chặn người dùng từ chọn nội dung một yếu tố. Không nơi nào trong số Basic UI Module có đề cập đến hành vi liên quan đến sao chép nội dung hay không. Tôi sẽ tưởng tượng đây là lý do tại sao có các biến thể trong số các trình duyệt khác nhau.

MDN cũng khẳng định:

khiển sự xuất hiện (chỉ) của vùng chọn. Điều này không có bất kỳ ảnh hưởng đến hoạt động lựa chọn thực tế.

Các nhận xét trong báo cáo WebKit Bugzilla này cũng cho biết điều tương tự.

Answer 2

Tôi gặp sự cố tương tự và tìm thấy giải pháp sau. https://danoc.me/blog/css-prevent-copy/

html:

<p data-pseudo-content="Lorem Ipsum"></p> 

css:

[data-pseudo-content]::before { 
    content: attr(data-pseudo-content); 
}