Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div contenteditable></div>
  <div class='placeholder'>paste HTML here <br><br>Go to some website and select things with your mouse and copy-paste it here</div>
</body>
</html>
 
[contenteditable]{ 
  //
  display:inline-block;
  width: calc(100% - 40px);
  min-height:200px; 
  margin:10px;
  padding:10px;
  border:1px dashed green;
}
​
​
/* 
 mark HTML inside the "contenteditable"  
 (Shouldn't be any)'
*/
[contenteditable] *{
  background-color:red;
}
​
.placeholder{
  position:absolute;
  top: 20px;
  left:20px;
  opacity:0;
  pointer-events:none;
}
​
​
​
[contenteditable]:empty + .placeholder{
  opacity:.6;
}
​
[contenteditable]:empty:focus + .placeholder{
  opacity:0;
}
​
body{ margin:0; padding:0; }
 
function onPaste(e){
  var content;
​
  e.preventDefault();
  
 
​
  if( e.originalEvent.clipboardData ){
    content = (e.originalEvent || e).clipboardData.getData('text/plain');
    console.log( typeof content )
    document.execCommand('insertText', false, content);
    return false;
  }
  else if( window.clipboardData ){
    content = window.clipboardData.getData('Text');
    if (window.getSelection)
      window.getSelection().getRangeAt(0).insertNode( document.createTextNode(content) );
  }
}
​
​
/////// EVENT BINDING /////////
​
// jQuery delegated event listener
$(document).on('paste', '[contenteditable]', onPaste);
​
// on-element event listener
// document.body.addEventListener("paste", onPaste);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers