javascript 禁止选中-前端问答-PHP中文网

javascript 禁止选中

WBOY

发布： 2023-05-09 10:53:37

原创

1931人浏览过

在 web 开发中，有时我们需要禁止用户选中网页中的某些元素，以确保其不受非法复制等风险。此时，javascript 的一个非常实用的特性——禁止选中就显示出了它的优势。

禁止选中，指的是在网页中选中某个元素后，浏览器不会把这个元素的文本等内容复制到剪贴板上。Javascript 可以将这种功能实现得非常简单。

方法如下所示：

// 防止选中文本
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);

登录后复制

该函数的作用，是将传入的元素变量进行禁止选中的处理。如果该元素已经设置了 onselectstart 属性，则将其设置为 false，以防止默认选中事件的触发。如果该属性不存在，则继续判断是否具有 MozUserSelect 属性。如果也不存在该属性，则设置元素的 onmousedown 为 false。

如果要避免某些特定元素被选中，则可以为该元素添加 careful-selectable 类，并重写该类的 MozUserSelect 属性。

立即学习“Java免费学习笔记（深入）”；

代码示例如下所示：

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

登录后复制

在上述代码中，为特定类的属性设置为 !important，以保证无论元素如何设置，都不会被选中。通过设置 user-select 属性，还可以实现文本可选中、但禁止鼠标右键复制等其他功能。

百度文心百中

百度大模型语义搜索体验中心

查看详情

不仅可以禁止选中，Javascript 还可以通过事件处理程序来禁止复制和剪切。

代码如下所示：

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

登录后复制

在上述代码中，我们首先传入了一个元素参数，然后分别为该元素的 copy 和 cut 事件添加了监听器。在这两种情况中，我们使用 preventDefault() 方法来防止默认行为的触发，从而达到禁止复制和剪切的效果。

总之，Javascript 中禁止选中、复制和剪切等操作方法都十分简单，只需要为特定元素设置一些属性或事件处理程序即可实现。在开发 Web 页面时，若涉及版权、隐私等敏感信息，禁止选中等操作必不可少。

以上就是javascript 禁止选中的详细内容，更多请关注php中文网其它相关文章！