2019-07-15 05:52:49 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
<title>Copy Test</title>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
</head>
|
|
|
|
|
<body id="body" style="user-select: none;"> <!-- text doesn't seem to matter here -->
|
|
|
|
|
<h1>Test clipboard code: none</h1>
|
|
|
|
|
<div id="area_id" contenteditable="true" style="-webkit-user-select: text; border: red; background-color: grey">dummy content</div>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
<li id="select" data-event="select"><a href="#" class="item-link list-button">Select All</a></li>
|
|
|
|
|
<li/>
|
|
|
|
|
<li/>
|
|
|
|
|
<li id="both" data-event="both"><a href="#" class="item-link list-button">Both TouchStart</a></li>
|
|
|
|
|
<li/>
|
|
|
|
|
<li/>
|
|
|
|
|
<li id="bothclick" data-event="both-click"><a href="#" class="item-link list-button">Both Click</a></li>
|
|
|
|
|
<li/>
|
|
|
|
|
<li/>
|
|
|
|
|
<li id="bothstopclick" data-event="both-stop-click"><a href="#" class="item-link list-button">Both StoponTouch Click</a></li>
|
|
|
|
|
<li/>
|
|
|
|
|
<li/>
|
|
|
|
|
<li id="aclass" data-event="both-aclass"><a class>Both AClass (fails on iOS)</a></li>
|
|
|
|
|
<li/>
|
|
|
|
|
<li/>
|
2019-07-15 06:53:06 -05:00
|
|
|
<li id="paste" data-event="paste"><a href="#">Paste</a></li>
|
|
|
|
|
<li/>
|
|
|
|
|
<li/>
|
2019-07-15 05:52:49 -05:00
|
|
|
</ul>
|
2019-07-15 06:53:06 -05:00
|
|
|
|
|
|
|
|
<div id="clipcontent">
|
|
|
|
|
</div>
|
2019-07-15 05:52:49 -05:00
|
|
|
</body>
|
|
|
|
|
<script defer>
|
|
|
|
|
var serial = 42;
|
|
|
|
|
|
|
|
|
|
document.getElementById('area_id').focus();
|
|
|
|
|
|
|
|
|
|
// --------- select function ---------
|
|
|
|
|
var doSelect = function() {
|
|
|
|
|
console.log('select whole area');
|
|
|
|
|
var selection = window.getSelection();
|
|
|
|
|
selection.removeAllRanges();
|
|
|
|
|
var rangeToSelect = document.createRange();
|
|
|
|
|
elem = document.getElementById('area_id');
|
|
|
|
|
rangeToSelect.selectNodeContents(elem);
|
|
|
|
|
selection.addRange(rangeToSelect);
|
|
|
|
|
};
|
|
|
|
|
var select = document.getElementById('select');
|
|
|
|
|
select.onclick = function(ev) {
|
|
|
|
|
doSelect();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// --------- copy function ---------
|
|
|
|
|
var doCopy = function(ev) {
|
|
|
|
|
console.log('On touch copy invoke');
|
|
|
|
|
|
|
|
|
|
try
|
|
|
|
|
{
|
|
|
|
|
console.log('exec command copy - before');
|
|
|
|
|
_ret = document.execCommand('copy');
|
|
|
|
|
console.log('exec command copy success: ' + _ret);
|
|
|
|
|
}
|
|
|
|
|
catch (err)
|
|
|
|
|
{
|
|
|
|
|
console.log('exception in copy ' + err);
|
|
|
|
|
_ret = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// --------- both function ---------
|
|
|
|
|
var both = document.getElementById('both');
|
|
|
|
|
both.ontouchstart = function(ev) {
|
|
|
|
|
doCopy();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var bothClick = document.getElementById('bothclick');
|
|
|
|
|
bothClick.onclick = function(ev) {
|
|
|
|
|
doCopy();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// JQuery context menu does this on touch - killing a click event
|
|
|
|
|
var bothStopClick = document.getElementById('bothstopclick');
|
|
|
|
|
bothStopClick.ontouchstart = function(ev) {
|
|
|
|
|
console.log('stop on touch!');
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
ev.stopImmediatePropagation();
|
|
|
|
|
return false;
|
|
|
|
|
};
|
|
|
|
|
bothStopClick.onclick = function(ev) {
|
|
|
|
|
doCopy();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var aclass = document.getElementById('aclass');
|
|
|
|
|
aclass.onclick = function(ev) {
|
|
|
|
|
doCopy();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Actually put serial data in the thing ..
|
|
|
|
|
document.oncopy = function(ev) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
var forclip = 'serial ' + serial++ + ' ops';
|
|
|
|
|
console.log('set clip to ' + forclip);
|
|
|
|
|
ev.clipboardData.setData('text/plain', forclip);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Do the selection
|
|
|
|
|
document.onbeforecopy = function(ev) {
|
|
|
|
|
console.log('we have to select in a before copy event [!]');
|
|
|
|
|
doSelect();
|
|
|
|
|
};
|
|
|
|
|
|
2019-07-15 06:53:06 -05:00
|
|
|
// --------- copy function ---------
|
|
|
|
|
var paste = document.getElementById('paste');
|
|
|
|
|
paste.onclick = function(ev) {
|
|
|
|
|
|
|
|
|
|
if (document.execCommand('paste'))
|
|
|
|
|
console.log('Paste succeeded');
|
|
|
|
|
else
|
|
|
|
|
console.log('Paste failed');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.onpaste = function(ev) {
|
|
|
|
|
if (!ev.clipboardData) { // non-standard
|
|
|
|
|
console.log('No clipboard data');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var dataTransfer = ev.clipboardData;
|
|
|
|
|
var types = dataTransfer.types;
|
|
|
|
|
|
|
|
|
|
console.log('We have ' + types.length + ' types');
|
|
|
|
|
for (var t = 0; t < types.length; ++t) {
|
|
|
|
|
var data = new Blob([dataTransfer.getData(types[t])]);
|
|
|
|
|
console.log('type ' + types[t] + ' length ' + data.size +
|
|
|
|
|
' -> 0x' + data.size.toString(16));
|
|
|
|
|
if (types[t].startsWith('text/'))
|
|
|
|
|
console.log('data: ' + dataTransfer.getData(types[t]));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
return false;
|
|
|
|
|
};
|
|
|
|
|
|
2019-07-15 05:52:49 -05:00
|
|
|
</script>
|
|
|
|
|
</body></html>
|
