首頁 > web前端 > css教學 > 如何防止 HTML 文字被選擇?

如何防止 HTML 文字被選擇?

Linda Hamilton
發布: 2024-11-10 09:49:02
原創
588 人瀏覽過

How to Prevent HTML Text from Being Selectable?

如何阻止HTML 文字被選擇

如果您希望將文字作為標籤嵌入網頁中並停用其可選擇性,請阻止當滑鼠懸停在文字上時,滑鼠遊標不再轉換為文字選擇遊標。

CSS3解決方案:

如果針對現代瀏覽器,請使用CSS3:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
登入後複製
<label class="unselectable">Unselectable label</label>
登入後複製

<script>Java <strong></script>

對於較舊的瀏覽器, JavaScript 後備方法可以是使用:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734</title>
        <script>
            window.onload = function() {
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++) {
                    disableSelection(labels[i]);
                }
            };
            function disableSelection(element) {
                if (typeof element.onselectstart != 'undefined') {
                    element.onselectstart = function() { return false; };
                } else if (typeof element.style.MozUserSelect != 'undefined') {
                    element.style.MozUserSelect = 'none';
                } else {
                    element.onmousedown = function() { return false; };
                }
            }
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>
登入後複製

jQuery 解決方案:

如果使用🎜>如果使用jQuery,請使用以下程式碼擴充其功能:

以上是如何防止 HTML 文字被選擇?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板