169.xhtml (1033B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Moving text from text input to contenteditable element</title> 5 <style type="text/css"> 6 div[contenteditable] 7 {width:300px; 8 height:100px; 9 margin-top:20px; 10 padding:10px; 11 color:white; 12 background-color:navy;} 13 </style> 14 <script type="application/ecmascript"> 15 function check() 16 {document.querySelector('p').firstChild.nodeValue = (document.querySelector('input').value == '' && document.querySelector('div').firstChild.nodeValue == 'Drag me')?'PASS':('FAIL(' + div[0].firstChild.nodeValue + ')');} 17 </script> 18 </head> 19 <body onload="document.querySelector('input').select()"> 20 <p>Drag selected text to the blue box. Copy of selection should end up in the blue box once you drop it there.</p> 21 <p><input value="Drag me"/></p> 22 <div ondragenter="event.preventDefault()" ondragover="event.preventDefault();event.dataTransfer.effectAllowed = 'move'" ondrop="window.setTimeout('check()',100)" contenteditable="true"/> 23 </body> 24 </html>