| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta charset="utf-8"> |
|---|
| 5 | <title>Test Page for dojo/dom.setSelectable</title> |
|---|
| 6 | <style> |
|---|
| 7 | @import "../resources/dojo.css"; |
|---|
| 8 | #test { |
|---|
| 9 | border: 1px solid #000; |
|---|
| 10 | padding: 10px; |
|---|
| 11 | } |
|---|
| 12 | .item { |
|---|
| 13 | float: left; |
|---|
| 14 | padding: 10px; |
|---|
| 15 | } |
|---|
| 16 | .item td { |
|---|
| 17 | border: 1px solid #ccc; |
|---|
| 18 | } |
|---|
| 19 | .clear { |
|---|
| 20 | clear: both; |
|---|
| 21 | padding: 10px; |
|---|
| 22 | } |
|---|
| 23 | </style> |
|---|
| 24 | </head> |
|---|
| 25 | <body> |
|---|
| 26 | <h1>Test Page for dojo/dom.setSelectable</h1> |
|---|
| 27 | <p>Use the buttons below and then attempt selecting in the bordered area |
|---|
| 28 | underneath.</p> |
|---|
| 29 | <p> |
|---|
| 30 | <button onclick="makeSelectable(true);">Allow Selection</button> |
|---|
| 31 | <button onclick="makeSelectable(false);">Prevent Selection</button> |
|---|
| 32 | </p> |
|---|
| 33 | <div id="test"> |
|---|
| 34 | <p>Some notes:</p> |
|---|
| 35 | <ul> |
|---|
| 36 | <li>In WebKit and IE10, <code>*-user-select: none</code> doesn't prevent you from |
|---|
| 37 | selecting within textboxes, whereas in Firefox it does</li> |
|---|
| 38 | <li>The <code>unselectable</code> attribute (used where <code>user-select</code> |
|---|
| 39 | is unavailable, e.g. IE < 10 and Opera) does not prevent text selection |
|---|
| 40 | when the selection is started from outside the node in question</li> |
|---|
| 41 | <li>In IE10, <code>-ms-user-select</code> exhibits the same behavior as |
|---|
| 42 | described in the previous bullet; all other browsers which implement |
|---|
| 43 | <code>*-user-select</code> seem to properly prevent selection even |
|---|
| 44 | when it is started outside of the node in question</li> |
|---|
| 45 | <li>Opera doesn't honor the <code>unselectable</code> attribute on textboxes</li> |
|---|
| 46 | <li>IE honors <code>unselectable</code> on textboxes, but moreover, it |
|---|
| 47 | prevents any input whatsoever</li> |
|---|
| 48 | </ul> |
|---|
| 49 | <div class="item"> |
|---|
| 50 | Some text |
|---|
| 51 | </div> |
|---|
| 52 | <table class="item"> |
|---|
| 53 | <tr> |
|---|
| 54 | <td>A</td> |
|---|
| 55 | <td>table</td> |
|---|
| 56 | <td>here</td> |
|---|
| 57 | </tr> |
|---|
| 58 | </table> |
|---|
| 59 | <div class="clear"> |
|---|
| 60 | <input type="text" value="an input here"> |
|---|
| 61 | </div> |
|---|
| 62 | More text here |
|---|
| 63 | </div> |
|---|
| 64 | <script src="../dojo.js"></script> |
|---|
| 65 | <script> |
|---|
| 66 | var makeSelectable; // function to be defined below |
|---|
| 67 | require(["dojo/dom", "dojo/domReady!"], function(dom){ |
|---|
| 68 | makeSelectable = function(selectable){ |
|---|
| 69 | dom.setSelectable("test", selectable); |
|---|
| 70 | }; |
|---|
| 71 | }); |
|---|
| 72 | </script> |
|---|
| 73 | </body> |
|---|
| 74 | </html> |
|---|
