JSFiddle - React, Tailwind, and code Playground

by willwade

HTML

<h3>
  Tab keyboard element for iOS
</h3>
<p>
To get a tab keyboard key follow these steps.
</p>
<ol>
  <li> Press the copy button below</li>
  <input id="copyTarget" value="	"> <button id="copyButton">Copy</button><br><br>
  <span id="msg"></span><br>

  <li> Now go to Settings → Keyboard → Text replacement → create new phrase.</li>
  <li>Paste the tab character that you've just copied into it and add another character at the end. You can't create an empty "TAB" or "SPACE" phrase, in my case I added "-" at the end.</li>
  <li>Choose a shortcut name you prefer such as "/tab".</li>
  <li>Now when you want to write a "tab" character simply type "/tab"</li>
  <li>Just remember - you may need to delete that trailing character of "-" depending on your needs</li>
</ol>

CSS

h1 {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  line-height: 26px;
}

h3 {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  line-height: 15px;
}

p,ol {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 20px;
}

blockquote {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 21px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 30px;
}

pre,msg {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 18px;
}

JavaScript

document.getElementById("copyButton").addEventListener("click", function() {
  copyToClipboardMsg(document.getElementById("copyTarget"), "msg");
});

document.getElementById("copyButton2").addEventListener("click", function() {
  copyToClipboardMsg(document.getElementById("copyTarget2"), "msg");
});

document.getElementById("pasteTarget").addEventListener("mousedown", function() {
  this.value = "";
});


function copyToClipboardMsg(elem, msgElem) {
  var succeed = copyToClipboard(elem);
  var msg;
  if (!succeed) {
    msg = "Copy not supported or blocked.  Press Ctrl+c to copy."
  } else {
    msg = "Tab copied to the clipboard."
  }
  if (typeof msgElem === "string") {
    msgElem = document.getElementById(msgElem);
  }
  msgElem.innerHTML = msg;
  setTimeout(function() {
    msgElem.innerHTML = "";
  }, 2000);
}

function copyToClipboard(elem) {
  // create hidden text element, if it doesn't already exist
  var targetId = "_hiddenCopyText_";
  var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
  var origSelectionStart, origSelectionEnd;
  if (isInput) {
    // can just use the original source element for the selection and copy
    target = elem;
    origSelectionStart = elem.selectionStart;
    origSelectionEnd = elem.selectionEnd;
  } else {
    // must use a temporary form element for the selection and copy
    target = document.getElementById(targetId);
    if (!target) {
      var target = document.createElement("textarea");
      target.style.position = "absolute";
      target.style.left = "-9999px";
      target.style.top = "0";
      target.id = targetId;
      document.body.appendChild(target);
    }
    target.textContent = elem.textContent;
  }
  // select the content
  var currentFocus = document.activeElement;
  target.focus();
  target.setSelectionRange(0, target.value.length);

  // copy the selection
  var succeed;
  try {
    succeed = document.execCommand("copy");
  } catch (e) {
    succeed = false;
  }
  // restore...