Bagaimana untuk Menghalang Teks HTML daripada Boleh Dipilih?-tutorial css-php.cn

Bagaimana untuk Menghalang Teks HTML daripada Boleh Dipilih?

Linda Hamilton

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

asal

561 orang telah melayarinya

How to Prevent HTML Text from Being Selectable?

Cara Mencegah Teks HTML Daripada Boleh Dipilih

Jika anda ingin membenamkan teks dalam halaman web anda sebagai label dan melumpuhkan kebolehpilihannya, halang kursor tetikus daripada berubah menjadi kursor pemilihan teks apabila melayang di atas teks.

Penyelesaian CSS3:

Jika menyasarkan penyemak imbas moden, gunakan 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;
}

Salin selepas log masuk

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

Salin selepas log masuk

JavaScript Fallback:

Untuk pelayar lama, kaedah sandaran JavaScript boleh digunakan:

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

Salin selepas log masuk

JQuery Solution:

Jika jQuery digunakan, lanjutkan fungsinya dengan kod berikut:

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Teks HTML daripada Boleh Dipilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!