Source code
Revision control
Copy as Markdown
Other Tools
<?xml version="1.0" encoding="utf-8"?>
<head>
<title>Events during selection drag and drop to search input</title>
<style type="text/css">
input[placeholder]
{width:300px;
height:50px;
margin-top:20px;}
.hidden
{visibility:hidden;}
</style>
<script type="application/ecmascript">
function evtChange()
{document.querySelectorAll('tt')[0].firstChild.nodeValue = 'PASS'}
function evtInput()
{document.querySelectorAll('tt')[1].firstChild.nodeValue = 'PASS'}
function evtDrop()
{document.querySelectorAll('tt')[2].firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL (selection is not properly added to data store)'}
function evtKeypress()
{document.querySelectorAll('tt')[3].firstChild.nodeValue = 'FAIL (even is not supposed to fire)'}
</script>
</head>
<body onload="window.getSelection().selectAllChildren(document.querySelector('p'))">
<p>Drag me</p>
<p>Drag selected text to the input below. Follow check results link once you drop selection in the input.</p>
<p><input type="search" placeholder="Drop selection here" onchange="evtChange()" oninput="evtInput()" onkeypress="evtKeypress()" ondrop="evtDrop()"/></p>
<p><a href="javascript:document.querySelector('ul').removeAttribute('class')">Check results</a></p>
<ul class="hidden">
<li>Change event: <tt>FAIL (even did not fire)</tt></li>
<li>Input event: <tt>FAIL (even did not fire)</tt></li>
<li>Drop event: <tt>FAIL (even did not fire)</tt></li>
<li>Keypress event: <tt>PASS</tt></li>
</ul>
</body>
</html>