Cross-iframe input / contenteditable demo

In this example below you will see how to do a Cross-iframe input / contenteditable demo with some HTML / CSS and Javascript

This awesome code was written by acusti, you can see more from this user in the personal repository.
You can find the original code on
Copyright acusti ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Cross-iframe input / contenteditable demo</title>
      <link rel="stylesheet" href="css/style.css">



  <input type="text">
<iframe srcdoc="<html><body style='padding: 0; margin: 0;'><div contenteditable style='border: 1px solid darkgray; width: 300px; height: 200px'></div></body></html>"></iframe>



/*Downloaded from */
iframe {
  border: 0;
  width: 100%;
  height: 202px;
  padding: 0;
  margin: 10px 0;