[Edit]

JavaScript - disable text selection

692

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html>
<head>
  <style>

    .disable-selection {
        -webkit-touch-callout: none;  /* iOS Safari                         */
          -webkit-user-select: none;  /* Safari                             */
           -khtml-user-select: none;  /* Konqueror HTML                     */
             -moz-user-select: none;  /* Firefox in the past (old versions) */
              -ms-user-select: none;  /* Internet Explorer (>=10) / Edge    */
                  user-select: none;  /* Currently supported:               */
                                      /* Chrome, Opera and Firefox          */
    }

  </style>
  <script>

    function SelectionLocker(element) {
        var classes = element.classList;
        var action = function(e) {
            e.preventDefault();
        };
        this.enable = function() {
            classes.add('disable-selection');
            element.addEventListener('selectstart', action, false);
        };
        this.disable = function() {
            classes.remove('disable-selection');
            element.removeEventListener('selectstart', action, false);
        };
    }
    
  </script>
</head>
<body>
  <div>
    Some text to select ...<br />
    Some text to select ...<br />
    Some text to select ...<br />
    Some text to select ...<br />
  </div>
  <br /><br />
  <script>

    var locker = new SelectionLocker(document.documentElement);  // document.body  or  document.querySelector('#element')
    
  </script>
  <button onclick="locker.enable()">Disable page selection</button>
  <button onclick="locker.disable()">Enable page selection</button>
</body>
</html>

Auto running

Reset