JavaScript: evidenzia il testo in textarea e copia negli appunti

Frammento di codice JavaScript

Quando cerco soluzioni per i siti Web dei miei clienti, mi imbatto sempre in frammenti di codice che sono generalmente molto utili. Per poterli ricordare anche io, ricevono semplicemente un post nel mio blog.

Copia il contenuto dei campi modulo negli appunti usando un pulsante

Nel caso di specie, il sito web in questione presenta un form con un'area di testo costituita da un codice TEXTAREA. Questo campo di testo contiene molte righe di dati che il visitatore deve selezionare e quindi copiare negli appunti stessi. Per semplificare questo passaggio, volevo aggiungere un pulsante che seleziona tutto nel campo di testo in una volta sola e quindi lo copia direttamente negli appunti.

Piccoli frammenti di codice aiutano sempre ad aggiungere utili funzioni ai siti Web (Foto: Joan Gamell/Unsplash).
Piccoli frammenti di codice aiutano sempre ad aggiungere utili funzioni ai siti Web (Foto: Joan Gamell/Unsplash).

Frammento di codice Javascript

Il tutto viene risolto tramite un Javascript, che assume la funzione del pulsante. Per fare ciò, usa il comando select() per selezionare il testo nell'elemento textarea e poi execCommand('copy' per copiare il testo. Funziona abbastanza bene nei browser più recenti.

Se stai già utilizzando la libreria jQuery, puoi utilizzare questo codice:

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

Se non hai jQuery in esecuzione sul sito Web, puoi utilizzare questo codice qui:

document.querySelector("button").onclick = function(){
  document.querySelector("textarea").select();
  document.execCommand('copy');
};

Il codice HTML per il pulsante e il campo del modulo devono quindi essere progettati in questo modo:

<button>Auswählen und kopieren</button>
<br/>
<textarea></textarea>

Spero che questo funzioni per te così come ha fatto per me. I browser più vecchi a volte possono causare problemi, ma penso che la maggior parte di essi abbia versioni attuali all'inizio. Se hai frammenti di codice utili, faccelo sapere. Sono sempre felice di nuovi utili frammenti di codice per HTML, JavaScript o PHP.

Ti è piaciuto l'articolo e le istruzioni sul blog ti hanno aiutato? Allora sarei felice se tu il blog tramite un'iscrizione stabile sosterrebbe.

Scrivi un commento

Il tuo indirizzo e-mail non verrà pubblicato. I campi obbligatori sono contrassegnati con * segnato

Nel blog di Sir Apfelot troverai consigli, istruzioni e recensioni sui prodotti Apple come iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini e Mac Studio.

Speciali