Javascript Copy to Clipboard

[MaLLaH95]

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

<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>

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

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

[False]

#moved

[iMostLiked]

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.

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.

[Wurzelhüpfer]

Ich empfehle Dir, Dich in die MDN Dokumentation des "copy event"'s einzulesen, dort gibt es sogar ein Beispiel, welches genau Deinen Bedürfnissen entsprechen sollte:
-