Javascript

Select & Copy 
<script> var fieldtoclipboard = { tooltipobj: null, hidetooltiptimer: null, createtooltip:function(){ var tooltip = document.createElement(‘div’) tooltip.style.cssText = ‘position:absolute; background:black; color:white; padding:4px;z-index:10000;’ + ‘border-radius:3px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);’ + ‘opacity:0;transition:opacity 0.3s’ tooltip.innerHTML = ‘Copied!’ this.tooltipobj = tooltip document.body.appendChild(tooltip) }, showtooltip:function(e){ var evt = e || event clearTimeout(this.hidetooltiptimer) this.tooltipobj.style.left = evt.pageX – 10 + ‘px’ this.tooltipobj.style.top = evt.pageY + 15 + ‘px’ this.tooltipobj.style.opacity = 1 this.hidetooltiptimer = setTimeout(function(){ fieldtoclipboard.tooltipobj.style.opacity = 0 }, 700) // time in milliseconds before tooltip disappears }, selectelement:function(el){ var range = document.createRange() // create new range object range.selectNodeContents(el) var selection = window.getSelection() // get Selection object from currently user selected text selection.removeAllRanges() // unselect any user selected text (if any) selection.addRange(range) // add range to Selection object to select it }, copyfield:function(e, fieldref, callback){ var field = (typeof fieldref == ‘string’)? document.getElementById(fieldref) : fieldref callbackref = callback || function(){} if (/(textarea)|(input)/i.test(field) && field.setSelectionRange){ field.focus() field.setSelectionRange(0, field.value.length) // for iOS sake } else if (field && document.createRange){ this.selectelement(field) } else if (field == null){ // copy currently selected text on document field = {value:null} } var copysuccess // var to check whether execCommand successfully executed try{ copysuccess = document.execCommand(“copy”) }catch(e){ copysuccess = false } if (copysuccess){ // execute desired code whenever text has been successfully copied if (e){ this.showtooltip(e) } callbackref(field.value || window.getSelection().toString()) } return false }, init:function(){ this.createtooltip() } } fieldtoclipboard.init() </script>

CSS

Select & Copy 
<style> @import url(‘https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap’); /* scrollbars */ ::-webkit-scrollbar {width: 8px;} ::-webkit-scrollbar-track {background: #fff;margin: 10px;} ::-webkit-scrollbar-thumb {background: #555; border-radius: 10px;} ::-webkit-scrollbar-thumb:hover { background: #222;} /* demo #1 textarea */ .control-copytextarea{ margin: 2px 8px -1px 4px; cursor: pointer; font-weight: bold; padding:3px 10px; border-radius: 5px 5px 0 0; background: #555; color: white; display: inline-block; box-shadow: 0 0 3px gray; font-size: 12px; } /* demo #2 input text with control */ #select1{ padding: 1px 8px 1px 8px; width: 95%; max-width: 500px; font-size: 12px; margin: 0; padding: 2px 12px 2px 10px; } #select2{ background-color: #333; color: #eee; line-height: 25px; // font-size: 105%; width: 95%; max-width: 500px; font-family: ‘Source Code Pro’, monospace; font-size: 12px; margin: 0; padding: 2px 12px 2px 10px; } #donker{ background-color: #333; color: #eee; line-height: 25px; width: 95%; max-width: 500px; font-family: ‘Source Code Pro’, monospace; font-size: 12px; padding: 2px 12px 2px 10px; } /* Standaard */ textarea{ padding: 4px 12px 2px 10px; line-height: 20px; width: 95%; max-width: 500px; font-family: ‘Source Code Pro’, monospace; font-size: 12px; margin: 0; } input{ padding: 4px 12px 2px 10px; line-height: 20px; width: 95%; max-width: 500px; font-family: ‘Source Code Pro’, monospace; font-size: 12px; margin: 0; } #select5{ background-color: #f3f3f3; color: #222; width: 95%; max-width: 500px; font-family: ‘Source Code Pro’, monospace; font-size: 12px; margin: 0; } .control-copyinput{ cursor: pointer; font-weight: bold; padding:3px 10px; border-radius: 8px; background: #55482b; color: white; display: inline-block; box-shadow: 0 0 3px gray; line-height: 25px; font-size: 12px; } /* demo #3 input text only */ fieldset{ width: 95%; background: lightyellow; max-width: 600px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #select3{ // font-size: 105%; margin: 0; width: 90%; max-width: 500px; font-family: ‘Source Code Pro’, monospace; font-size: 12px; } /* demo #4 regular div */ #select4{ width: 95%; max-width: 500px; border: 1px solid orange; padding: 5px; background: lightyellow; font-family: ‘Source Code Pro’, monospace; font-size: 12px; padding: 2px 12px 2px 10px; } .control-copydiv{ cursor: pointer; margin-top: 8px; display: inline-block; border: 1px solid red; color: red; padding: 2px 5px; border-radius: 3px; margin-top: 8px; background: white; } </style> <script> /* www.tooljunkie.eu */ var fieldtoclipboard = { tooltipobj: null, hidetooltiptimer: null, createtooltip:function(){ var tooltip = document.createElement(‘div’) tooltip.style.cssText = ‘position:absolute; background:black; color:white; padding:4px;z-index:10000;’ + ‘border-radius:3px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);’ + ‘opacity:0;transition:opacity 0.3s’ tooltip.innerHTML = ‘Copied!’ this.tooltipobj = tooltip document.body.appendChild(tooltip) }, showtooltip:function(e){ var evt = e || event clearTimeout(this.hidetooltiptimer) this.tooltipobj.style.left = evt.pageX – 10 + ‘px’ this.tooltipobj.style.top = evt.pageY + 15 + ‘px’ this.tooltipobj.style.opacity = 1 this.hidetooltiptimer = setTimeout(function(){ fieldtoclipboard.tooltipobj.style.opacity = 0 }, 700) // time in milliseconds before tooltip disappears }, selectelement:function(el){ var range = document.createRange() // create new range object range.selectNodeContents(el) var selection = window.getSelection() // get Selection object from currently user selected text selection.removeAllRanges() // unselect any user selected text (if any) selection.addRange(range) // add range to Selection object to select it }, copyfield:function(e, fieldref, callback){ var field = (typeof fieldref == ‘string’)? document.getElementById(fieldref) : fieldref callbackref = callback || function(){} if (/(textarea)|(input)/i.test(field) && field.setSelectionRange){ field.focus() field.setSelectionRange(0, field.value.length) // for iOS sake } else if (field && document.createRange){ this.selectelement(field) } else if (field == null){ // copy currently selected text on document field = {value:null} } var copysuccess // var to check whether execCommand successfully executed try{ copysuccess = document.execCommand(“copy”) }catch(e){ copysuccess = false } if (copysuccess){ // execute desired code whenever text has been successfully copied if (e){ this.showtooltip(e) } callbackref(field.value || window.getSelection().toString()) } return false }, init:function(){ this.createtooltip() } } fieldtoclipboard.init() </script>

Kies hieronder een thema

Select & Copy Thema 1
<p>Thema 1 <!– form 1 –></p> <span class=”control-copytextarea” onclick=”return fieldtoclipboard.copyfield(event, ‘select1’)”>Select & Copy</span> Info <br /><span class=”textarea”> <textarea cols=”55″ id=”select1″ name=”form1″ rows=”5″>Code 2 – Met standaard lettertype</textarea>
 

Select & Copy Thema donder
<p>Thema Donkere <!– form 2 –></p> <p><span class=”control-copytextarea” onclick=”return fieldtoclipboard.copyfield(event, ‘donker’)”>Select & Copy</span> Info 2&nbsp;<img alt=”Chrome” src=”//tooljunkie.eu/img/ico/chrome.png” style=”width: 14px; height: 14px;” />&nbsp;<img alt=”Firefox” src=”https://tooljunkie.eu/img/ico/firefox.png” style=”width: 14px; height: 14px;” /><br /> <textarea cols=”55″ id=”donker” name=”form2″ rows=”5″>Donkere achtergrond </textarea></p>
 

Select & Copy Witte achtergrond
<p>Thema 4 <!– form 4 –></p> <p><span class=”control-copytextarea” onclick=”return fieldtoclipboard.copyfield(event, ‘select5’)”>Select & Copy</span>Gebruik deze code<br /> <textarea cols=”55″ id=”select5″ name=”form3″ rows=”4″>Thema 4</textarea></p>
 

Select & Copy Thema geel
<p>Thema geel <!– form geel –></p> <p><span class=”control-copytextarea” onclick=”return fieldtoclipboard.copyfield(event, ‘select4’)”>Select & Copy</span><br /> <textarea cols=”55″ id=”geel” name=”geel1″ rows=”5″>Gele achtergrond</textarea></p>