test_dom_setSelectable.html
2.13 KB
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page for dojo/dom.setSelectable</title>
<style>
@import "../resources/dojo.css";
#test {
border: 1px solid #000;
padding: 10px;
}
.item {
float: left;
padding: 10px;
}
.item td {
border: 1px solid #ccc;
}
.clear {
clear: both;
padding: 10px;
}
</style>
</head>
<body>
<h1>Test Page for dojo/dom.setSelectable</h1>
<p>Use the buttons below and then attempt selecting in the bordered area
underneath.</p>
<p>
<button onclick="makeSelectable(true);">Allow Selection</button>
<button onclick="makeSelectable(false);">Prevent Selection</button>
</p>
<div id="test">
<p>Some notes:</p>
<ul>
<li>In WebKit and IE10, <code>*-user-select: none</code> doesn't prevent you from
selecting within textboxes, whereas in Firefox it does</li>
<li>The <code>unselectable</code> attribute (used where <code>user-select</code>
is unavailable, e.g. IE < 10 and Opera) does not prevent text selection
when the selection is started from outside the node in question</li>
<li>In IE10, <code>-ms-user-select</code> exhibits the same behavior as
described in the previous bullet; all other browsers which implement
<code>*-user-select</code> seem to properly prevent selection even
when it is started outside of the node in question</li>
<li>Opera doesn't honor the <code>unselectable</code> attribute on textboxes</li>
<li>IE honors <code>unselectable</code> on textboxes, but moreover, it
prevents any input whatsoever</li>
</ul>
<div class="item">
Some text
</div>
<table class="item">
<tr>
<td>A</td>
<td>table</td>
<td>here</td>
</tr>
</table>
<div class="clear">
<input type="text" value="an input here">
</div>
More text here
</div>
<script src="../dojo.js"></script>
<script>
var makeSelectable; // function to be defined below
require(["dojo/dom", "dojo/domReady!"], function(dom){
makeSelectable = function(selectable){
dom.setSelectable("test", selectable);
};
});
</script>
</body>
</html>