082.xhtml (1564B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Events during selection drag and drop to search input</title> 5 <style type="text/css"> 6 input[placeholder] 7 {width:300px; 8 height:50px; 9 margin-top:20px;} 10 .hidden 11 {visibility:hidden;} 12 </style> 13 <script type="application/ecmascript"> 14 function evtChange() 15 {document.querySelectorAll('tt')[0].firstChild.nodeValue = 'PASS'} 16 function evtInput() 17 {document.querySelectorAll('tt')[1].firstChild.nodeValue = 'PASS'} 18 function evtDrop() 19 {document.querySelectorAll('tt')[2].firstChild.nodeValue = (event.dataTransfer.getData('text/plain') == 'Drag me')?'PASS':'FAIL (selection is not properly added to data store)'} 20 function evtKeypress() 21 {document.querySelectorAll('tt')[3].firstChild.nodeValue = 'FAIL (even is not supposed to fire)'} 22 </script> 23 </head> 24 <body onload="window.getSelection().selectAllChildren(document.querySelector('p'))"> 25 <p>Drag me</p> 26 <p>Drag selected text to the input below. Follow check results link once you drop selection in the input.</p> 27 <p><input type="search" placeholder="Drop selection here" onchange="evtChange()" oninput="evtInput()" onkeypress="evtKeypress()" ondrop="evtDrop()"/></p> 28 <p><a href="javascript:document.querySelector('ul').removeAttribute('class')">Check results</a></p> 29 <ul class="hidden"> 30 <li>Change event: <tt>FAIL (even did not fire)</tt></li> 31 <li>Input event: <tt>FAIL (even did not fire)</tt></li> 32 <li>Drop event: <tt>FAIL (even did not fire)</tt></li> 33 <li>Keypress event: <tt>PASS</tt></li> 34 </ul> 35 </body> 36 </html>