CSS長按復制代碼是指利用CSS技術實現代碼展示模塊,且能夠支持長按復制功能,方便用戶快速復制粘貼代碼。
一般情況下,我們使用的是代碼塊顯示方式,即pre標簽包裹代碼,然后再配合樣式實現行高亮、行號等功能,但是長按復制功能并非直接通過pre標簽的屬性實現。
實現方法一般是在pre標簽的外層包裹一層code標簽,然后設置code元素為block元素,并添加user-select:none;屬性實現禁止選擇,再使用::selection偽類對用戶選中元素進行樣式調整,最終實現長按復制的效果。
<pre class="code-block">
<code class="code-wrap">
//你的代碼
</code>
</pre>
pre.code-block {
position: relative;
}
code.code-wrap {
display: block;
user-select: none;
}
code.code-wrap::selection {
color: #fff;
background-color: #008cba;
}
在使用CSS長按復制功能時,還需要考慮到瀏覽器兼容性的問題,不同瀏覽器對user-select:none;屬性的支持不同,需要使用瀏覽器專屬的樣式前綴實現,同時還需要針對移動端進行特殊處理。
最后,還要注意到長按復制功能可能會與其他瀏覽器默認行為功能沖突,比如iOS上的長按彈出菜單,需要進行特殊處理,避免用戶體驗受影響。
上一篇css防止被下載