How Can I Disable Text Selection in My HTML UI?

Disable Text Selection for Enhanced UI Experience

When designing HTML user interfaces, some text elements, like tab names, can look undesirable when selected. To prevent this, consider implementing one of the following methods.

CSS Solution

For most browsers, the following CSS style can make text unselectable:

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

HTML Attribute for IE and Opera

For browsers like IE (below version 10) and Opera, use the unselectable attribute:

<div>

JavaScript Recursion for Extensive Unselectable Areas

For cases where nesting is involved, use JavaScript to recursively set the unselectable attribute:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

The above is the detailed content of How Can I Disable Text Selection in My HTML UI?. For more information, please follow other related articles on the PHP Chinese website!