javascript disable selection

In web development, sometimes we need to prohibit users from selecting certain elements in a web page to ensure that they are not subject to risks such as illegal copying. At this time, a very practical feature of Javascript - disabling selection shows its advantages.

Disable selection means that after selecting an element on the web page, the browser will not copy the text and other content of this element to the clipboard. Javascript can implement this function very easily.

The method is as follows:

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

The function of this function is to disable selection of the passed element variable. If the element has the onselectstart attribute set, set it to false to prevent the default selected event from firing. If the property does not exist, continue to determine whether it has the MozUserSelect property. If this attribute is not present either, sets the element's onmousedown to false.

If you want to prevent some specific elements from being selected, you can add a careful-selectable class to the element and override the MozUserSelect attribute of the class.

The code example is as follows:

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

In the above code, the attribute for the specific class is set to !important to ensure that no matter how the element is set, it will not be selected. By setting the user-select attribute, you can also achieve other functions such as text being selectable but right-click copying being prohibited.

Not only can you disable selection, Javascript can also disable copying and cutting through event handlers.

The code is as follows:

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

In the above code, we first pass in an element parameter, and then add listeners to the copy and cut events of the element respectively. In both cases, we use the preventDefault() method to prevent the default behavior from being triggered, thereby disabling copying and cutting.

In short, disabling operations such as selection, copying, and cutting in Javascript is very simple. You only need to set some properties or event handlers for specific elements to achieve this. When developing web pages, if sensitive information such as copyright and privacy is involved, operations such as disabling selection are essential.

The above is the detailed content of javascript disable selection. For more information, please follow other related articles on the PHP Chinese website!