{"id":3772,"date":"2021-03-18T16:28:20","date_gmt":"2021-03-18T16:28:20","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=3772"},"modified":"2026-04-02T17:04:53","modified_gmt":"2026-04-02T16:04:53","slug":"copy-to-clipboard","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/copy\/copy-to-clipboard","title":{"rendered":"Copy to clipboard"},"content":{"rendered":"\n<p>Most browsers will only allow copying of text from a visible input box or textarea<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Copy function that multiple div boxes can use<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;style>\n  .ClickToCopyBox\n  {\n    border: 1px solid #000;\n    max-width: 600px;\n    width: 100%;\n    padding: 6px;\n    box-sizing: border-box;\n    overflow-wrap: break-word;\n  }\n  .ClickToCopyBox.Copied\n  {\n    background: #d4ffd4;\n  }\n  &lt;\/style>\n\n  &lt;div class=\"ClickToCopyBox\">\n    Something that will be copied\n  &lt;\/div>\n\n  &lt;div class=\"ClickToCopyBox\">\n    Something else that will be copied\n  &lt;\/div>\n\n  &lt;div class=\"ClickToCopyBox\" data-copy=\"Custom text to copy\">\n    This won't be copied, the data-copy=\"\" text will be instead.\n  &lt;\/div>\n\n  &lt;script>\n  function CopyElementText(element)\n  {\n    let text = element.innerText.trim();\n\n    navigator.clipboard.writeText(text)\n      .then(function()\n      {\n        element.classList.add('Copied');\n\n        setTimeout(function()\n        {\n          element.classList.remove('Copied');\n        }, 1000);\n      })\n      .catch(function(err)\n      {\n        console.error('Copy failed:', err);\n      });\n  }\n\n  document.querySelectorAll('.ClickToCopyBox').forEach(function(el)\n  {\n    el.style.cursor = 'pointer';\n\n    el.addEventListener('click', function()\n    {\n      CopyElementText(el);\n    });\n  });\n  &lt;\/script><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">Providing different text to be copied than the text displayed<\/h5>\n\n\n\n<p>Add this to the div tab and it will be used instead:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>data-copy=\"Custom text to copy\"<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Text area example for wordpress (jQuery)<\/h4>\n\n\n\n<p>This example overwrites the textarea value in case user has altered it<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;input id=\"MyElement1\" type=\"textarea\" onclick=\"this.select();  value=\"The text I want copied\" &gt;\n  &lt;a href=\"javascript:void(0);\" onclick=\"CopyToClipboard('MyElement1', 'The text I want copied');\" &gt;Copy to clipboard&lt;\/a&gt;\n\n    &lt;script&gt;   \n      function CopyToClipboard(InputElementId, RequiredText) {\n        document.getElementById(InputElementId).value = RequiredText;\n        var copyText = document.getElementById(InputElementId);\n        copyText.select();\n        copyText.setSelectionRange(0, 99999); \/* For mobile devices *\/\n        document.execCommand(\"copy\");\n      \n        alert(\"Copied to your clipboard\");\n      }\n    &lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Most browsers will only allow copying of text from a visible input box or textarea Copy function that multiple div boxes can use Providing different text to be copied than the text displayed Add this to the div tab and it will be used instead: Text area example for wordpress (jQuery) This example overwrites the [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[304],"tags":[],"class_list":["post-3772","post","type-post","status-publish","format-standard","hentry","category-copy"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/3772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=3772"}],"version-history":[{"count":3,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/3772\/revisions"}],"predecessor-version":[{"id":4414,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/3772\/revisions\/4414"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=3772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=3772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=3772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}