Bagaimana untuk membuat teks tidak dapat dipilih dalam HTML?

Cara Membuat Teks HTML Tidak Boleh Dipilih: Penjelasan Terperinci

Timbul persoalan: bagaimana untuk membuat teks pada halaman web tidak boleh dipilih, menghalang kursor daripada bertukar kepada kursor pemilihan teks apabila melayang. Tingkah laku ini biasanya diperhatikan pada butang, seperti yang terdapat pada tapak web Stack Overflow.

Penyelesaian CSS3

Untuk penyemak imbas moden, penyelesaian CSS3 sudah memadai:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Untuk menggunakan gaya ini, tambahkan kelas yang tidak boleh dipilih pada elemen label:

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

JavaScript Fallback

Untuk pelayar lama, sandaran JavaScript adalah perlu:

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; };
    }
}

window.onload = function() {
    var labels = document.getElementsByTagName('label');
    for (var i = 0; i < labels.length; i++) {
        disableSelection(labels[i]);
    }
};

jQuery Solution

Jika jQuery digunakan, lanjutkan fungsi disableSelection():

$.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; };
            }
        }); 
    } 
});

Kemudian gunakannya untuk melabel elemen:

$(document).ready(function() {
    $('label').disableSelection();            
});

Atas ialah kandungan terperinci Bagaimana untuk membuat teks tidak dapat dipilih dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!