Script per copiare contenuto in un tag <pre>

**carlomarangoni** · 23-05-2019, 22:49

Ho questo script js che dovrebbe creare un bottone per copiare il contenuto in un tag <pre>!
Il bottone si crea ma non copia il contenuto del tag <pre>
Se sostituisco <pre> con un <input type="text"> funziona egregiamente.
Dove sta l'errore che mi sfugge?
Grazie

codice:

<html> <head>
<meta charset="utf-8">
<title>Copiare un testo negli appunti con JavaScript</title>
</head>
<body>
<div class="myinput">
<h1>Premi il pulsante e copia il testo</h1>
<pre id="testo-da-copiare">Blah! Blah! Blah!</pre>
<input type="button" id="pulsante-da-premere" value="Copia negli appunti">
</div>
<script>
document.querySelector("#pulsante-da-premere").onclick = function() {
// selezione del contenuto
document.querySelector("#testo-da-copiare").select();
// copia negli appunti
document.execCommand('copy');
};
</script>
</body>
</html>

**KillerWorm** · 24-05-2019, 17:48

Dove sta l'errore che mi sfugge?

Il metodo select() è supportato solo da campi di testo (input e textarea). Su altri tipi di elemento, come in quel caso, si riceve un errore in console del tipo "...select is not a function".

**carlomarangoni** · 24-05-2019, 18:51

Grazie
Cosa consigli di usare per il pre?

**KillerWorm** · 24-05-2019, 22:21

In quel caso è necessario selezionare il testo per vie traverse ma la cosa non è troppo scontata perché browser differenti usano metodi differenti.

A questo punto potrebbe essere più semplice utilizzare un qualche snippet già pronto che possa fornire una soluzione il più possibile crossbrowser.

In giro ce ne sono vari, basta cercare qualcosa del tipo "snippet javascript select text inside element"
Tra i tanti, questo mi pare abbastanza buono e crossbrowser: https://gist.github.com/elundmark/8037991

codice:

function selectAllText (elem) {
	var range, selection;
	// A jQuery selector should pass through too
	elem = (elem.jquery && elem.length) ? elem[0] : elem;
	if ( !elem ) {
		return;
	} else if ( elem.nodeName.match(/^(INPUT|TEXTAREA)$/i) ) {
		elem.focus();
		elem.select();
	} else if ( typeof document.body.createTextRange === "function" ) {
		// IE or Opera <10.5
		range = document.body.createTextRange();
		range.moveToElementText(elem);
		range.select();
	} else if ( typeof window.getSelection === "function" ) {
		selection = window.getSelection();
		if ( typeof selection.setBaseAndExtent === "function" ) {
			// Safari
			selection.setBaseAndExtent(elem, 0, elem, 1);
		} else if ( typeof selection.addRange === "function"
			&& typeof selection.removeAllRanges === "function"
			&& typeof document.createRange === "function" ) {
			// Mozilla or Opera 10.5+
			range = document.createRange();
			range.selectNodeContents(elem);
			selection.removeAllRanges();
			selection.addRange(range);	
		}
	}
}

.
Sarà sufficiente inserire quella funzione dentro il proprio script, quindi richiamarla passando quell'elemento come argomento:

codice:

selectAllText(document.querySelector("#testo-da-copiare"));

Un'altra tecnica è quella di creare al volo un elemento textarea in cui riversare il testo dell'elemento desiderato e a quel punto andare col metodo select(). Si veda questo tutorial: https://hackernoon.com/copying-text-...t-df4d4988697f

Discussione: Script per copiare contenuto in un tag <pre>

Strumenti discussione

Ricerca discussione

Visualizza

Script per copiare contenuto in un tag <pre>

Permessi di invio