Wie kann verhindert werden, dass HTML-Text auswählbar ist?-CSS-Tutorial-php.cn

Wie kann verhindert werden, dass HTML-Text auswählbar ist?

Linda Hamilton

Freigeben： 2024-11-10 09:49:02

Original

579 Leute haben es durchsucht

How to Prevent HTML Text from Being Selectable?

So verhindern Sie, dass HTML-Text auswählbar ist

Wenn Sie Text als Beschriftung in Ihre Webseite einbetten und seine Auswählbarkeit deaktivieren möchten, verhindern Sie dies Der Mauszeiger verwandelt sich nicht in einen Textauswahlcursor, wenn Sie mit der Maus über den Text fahren.

CSS3 Lösung:

Wenn Sie auf moderne Browser abzielen, verwenden Sie 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;
}

Nach dem Login kopieren

<label class="unselectable">Unselectable label</label>

Nach dem Login kopieren

JavaScript-Fallback:

Für ältere Browser: Es kann eine JavaScript-Fallback-Methode eingesetzt werden:

<!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>

Nach dem Login kopieren

jQuery Lösung:

Wenn jQuery verwendet wird, erweitern Sie dessen Funktionalität mit dem folgenden Code:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $.fn.extend({ 
                disableSelection: function() { 
                    this.each(function() { 
                        if (typeof this.onselectstart != 'undefined') {
                            this.onselectstart = function() { return false; };
                        } else if (typeof this.style.MozUserSelect != 'undefined') {
                            this.style.MozUserSelect = 'none';
                        } else {
                            this.onmousedown = function() { return false; };
                        }
                    }); 
                } 
            });

            $(document).ready(function() {
                $('label').disableSelection();            
            });
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass HTML-Text auswählbar ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!