Javascript Copy to Clipboard

Hallo Community,

ich habe einen Copy to Clipboard script gefunden und wollte diesen nicht nur bei <div> sondern auch bei <textarea> verwenden.
Leider habe ich nicht so viel Erfahrung was das angeht, aber vielleicht kann mir einer helfen

motivate = soll <div> sein und motivatee = textarea

Spoiler

Code:

<script>
var tooltip, // global variables oh my! Refactor when deploying!
	hidetooltiptimer;

function createtooltip(){ // call this function ONCE at the end of page to create tool tip object
	tooltip = document.createElement('div') || document.createElement('textarea')
	tooltip.style.cssText = 
		'position:absolute; background:black; color:white; padding:4px;z-index:10000;'
		+ 'border-radius:2px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);'
		+ 'opacity:0;transition:opacity 0.3s'
	tooltip.innerHTML = 'Copied!'
	document.body.appendChild(tooltip)
}

function showtooltip(e){
	var evt = e || event
	clearTimeout(hidetooltiptimer)

	tooltip.style.left = evt.pageX - 10 + 'px'
	tooltip.style.top = evt.pageY + 15 + 'px'
	tooltip.style.opacity = 1
	hidetooltiptimer = setTimeout(function(){
		tooltip.style.opacity = 0
	}, 500);
  
}


function selectElementText(el){
    var range = document.createRange() // create new range object
    range.selectNodeContents(el) // set range to encompass desired element text
    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
}

 

function copySelectionText(){
    var copysuccess // var to check whether execCommand successfully executed
    
    try{
        copysuccess = document.execCommand("copy") // run command to copy selected text to clipboard
    } catch(e){
        copysuccess = false
    }
    return copysuccess
}



var motivatebox = document.getElementById('motivatebox')
 
motivatebox.addEventListener('mouseup', function(e){
  
    var e = e || event // equalize event object between modern and older IE browsers 
    var target = e.target || e.srcElement // get target element mouse is over
    if (target.className == 'motivate' || target.className == 'motivatee'){
        selectElementText(target) // select the element's text we wish to read
        var copysuccess = copySelectionText()
        if (copysuccess){
         
            showtooltip(e)
        } 
    }
}, false)
 

createtooltip();




var copyIt = document.getElementById('button1')
copyIt.addEventListener('click', function(e){
  
 
    var target = document.getElementById('box1')  
    if (target.className == 'motivate' || target.className == 'motivatee'){
        selectElementText(target) // select the element's text we wish to read
        var copysuccess = copySelectionText()
        if (copysuccess){
         
            showtooltip(e)
        } 
    }
}, false)
</script>

HTML Code:

    <div class="motivate" id="box1">TEST
    </div>

HTML Code:

    <textarea class="motivatee" id="box1">
TEST2
    </textarea>

Bin ich blind oder selektierst du nirgends den Text? Um execCommand('copy') ausf�hren zu k�nnen, muss die Textarea/das Input einen Fokus haben/selektiert sein.

Schau dir bitte dieses Beispiel an und �berlege, wie du das am Besten in dein Beispiel implementieren kannst. Wie bereits gesagt, muss das jeweilige Feld einen Fokus, also el.select(), haben.

Code:

const el = document.createElement('textarea');
el.value = 'Bitte kopiere mich!';
el.readonly = '';
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);

Sofern du nicht mit einem Fokus arbeiten m�chtest, musst du den selektierten Text in eine Variable speichern und den obigen Code von mir nutzen.