JSFiddle - React, Tailwind, and code Playground

by Leonid Artemev

HTML

<html>
  <head>
    <meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <style>
      html {
        -ms-touch-action: manipulation;
        touch-action: manipulation;
      }
    </style>
  </head>

  <body>
    <div id="page">
      <div id="parent"></div>

      <br><br>
      <button id="button" class="button" style="width: 100px; height: 42px;">Focus</button>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
      window.addEventListener('DOMContentLoaded', function() {
        var button = document.querySelector('#button');

        var focus = function(e) {
          e.stopPropagation();
          e.preventDefault();

          var parent = $('#page #parent');
          parent.html('');
          //      parent.append('<textarea id="input"></textarea>');
          parent.prepend('<div id="input" contenteditable="true" style="width: 200px;height: 60px;border: 1px solid red;"></div>');

          var input = document.querySelector('#input');

          input.focus();

//          setTimeout(function() {
//            var input = document.querySelector('#input');
//
//            input.focus();
//          });
        };

     button.addEventListener('mousedown', focus, true);
      button.addEventListener('touchstart', focus, true);
//      button.addEventListener('click', focus);
//        button.addEventListener('mouseup', focus);
  //    button.click(focus);
      }, false);
    </script>
  </body>
</html>