can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
75 lines (74 loc) • 2.18 kB
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>