Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Script per copiare contenuto in un tag <pre>

    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>
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,346
    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".
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Grazie
    Cosa consigli di usare per il pre?
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,346
    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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.