javascript désactiver la sélection

Dans le développement web, nous devons parfois interdire aux utilisateurs de sélectionner certains éléments dans une page web pour garantir qu'ils ne soient pas soumis à des risques tels que la copie illégale. A l'heure actuelle, une fonctionnalité très pratique de Javascript - la désactivation de la sélection - montre ses avantages.

Désactiver la sélection signifie qu'après avoir sélectionné un élément sur la page Web, le navigateur ne copiera pas le texte et les autres contenus de cet élément dans le presse-papiers. Javascript peut implémenter cette fonction très facilement. La méthode

est la suivante :

// 防止选中文本
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; };
    }
}
// 调用示例
disableSelection(document.body);

La fonction de cette fonction est de désactiver la sélection de la variable d'élément passée. Si l'attribut onselectstart est défini sur l'élément, définissez-le sur false pour empêcher le déclenchement de l'événement sélectionné par défaut. Si la propriété n'existe pas, continuez à déterminer si elle possède la propriété MozUserSelect. Si cet attribut n'est pas présent non plus, définit onmousedown de l'élément sur false.

Si vous souhaitez empêcher la sélection de certains éléments spécifiques, vous pouvez ajouter une classe soigneusement sélectionnable à l'élément et remplacer l'attribut MozUserSelect de la classe.

L'exemple de code est le suivant :

.careful-selectable {
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

Dans le code ci-dessus, l'attribut de la classe spécifique est défini sur !important pour garantir que quelle que soit la façon dont l'élément est défini, il ne sera pas sélectionné. En définissant l'attribut user-select, vous pouvez également obtenir d'autres fonctions telles que le texte pouvant être sélectionné mais la copie par clic droit étant interdite.

Non seulement vous pouvez désactiver la sélection, mais Javascript peut également désactiver la copie et le découpage via les gestionnaires d'événements.

Le code est le suivant :

// 防止复制和剪切
function disableCopyAndCut(element) {
    element.addEventListener('copy', function(e) {
        e.preventDefault();
        console.log('禁止复制！');
    });
    element.addEventListener('cut', function(e) {
        e.preventDefault();
        console.log('禁止剪切！');
    });
}
// 调用示例
disableCopyAndCut(document.body);

Dans le code ci-dessus, nous passons d'abord un paramètre d'élément, puis ajoutons des écouteurs pour les événements de copie et de coupure de l'élément respectivement. Dans les deux cas, nous utilisons la méthode PreventDefault() pour empêcher le déclenchement du comportement par défaut, désactivant ainsi la copie et la découpe.

En bref, désactiver les opérations telles que la sélection, la copie et la coupe en Javascript est très simple. Il vous suffit de définir certaines propriétés ou gestionnaires d'événements pour des éléments spécifiques. Lors du développement de pages Web, si des informations sensibles telles que les droits d'auteur et la confidentialité sont impliquées, des opérations telles que la désactivation de la sélection sont essentielles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!