Funzione copia multipla.

PaoloG

Utente Attivo
23 Ago 2020
22
0
1
Buona sera, ho questo script:

JavaScript:
  function copia(testo) {
    var input = document.createElement('input');
    var area = document.getElementById(testo).value;
    input.setAttribute('value', area);
    document.body.appendChild(input);
    input.select();
    var risultato = document.execCommand('copy');
    document.body.removeChild(input);
    alert('testo copiato: '+ area);
    return risultato;
}

che con questo:

PHP:
<div>
   <input type="text" id="area" value="'. $MyVar .'">
   <button onclick="copia(\'area\')">Copia</button>
</div>

Ora inserendo l'ultimo codice in un ciclo While creo un certo numero di input text con relativo pulsante.

Il problema è che qualunque pulsante io prema mi copia sempre il testo della prima input text.

C'è un metodo per copiare il testo della input text relativa al pulsante?
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Salve, nel tuo ciclo while stai creando degli elementi che hanno lo stesso "id", quindi hai degli "id" duplicati all'interno dello stesso documento html.

Nella programmazione javascript, e in generale in html, è essenziale che gli "id" attribuiti agli elementi siano univoci. Il metodo getElementById() infatti restituisce un solo elemento, cioè il primo (e presumibilmente unico) che corrisponde all'id specificato. Ecco il motivo del comportamento da te menzionato.

Si può risolvere in vari modi a seconda delle esigenze.

Molto banalmente potresti usare degli "id" incrementali (ad es. "area1", "area2", "areaN") e di conseguenza passare tale valore alla tua funzione copia().

Un modo più ottimale può essere quello di usare dei riferimenti relativi in modo da poter risalire all'elemento text-input in base alla posizione gerarchica del button.

Un semplice esempio: supponiamo che l'elemento text-input sia posto sempre appena prima del button, sarebbe possibile usare previousElementSibling (come proprietà del button) per selezionare il relativo elemento text-input.

Il codice potrebbe essere una cosa di questo tipo:
HTML:
<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
  </head>
  <body>

        <div>
           <input type="text" value="Lorem ipsum">
           <button class="pulsante_copia">Copia</button>
        </div>
        <div>
           <input type="text" value="dolor sit amet">
           <button class="pulsante_copia">Copia</button>
        </div>
        <div>
           <input type="text" value="consectetur adipiscing elit">
           <button class="pulsante_copia">Copia</button>
        </div>

        <script>
            document.querySelectorAll('.pulsante_copia').forEach(btn => {
                btn.addEventListener('click', e => copiaTesto(btn.previousElementSibling));
            });
            function copiaTesto(el) {
                var txt = el.value;
                el.select();
                document.execCommand('copy');
                el.blur();
                alert('testo copiato: ' + txt);
            }
        </script>

    </body>
</html>

Chiaramente questo vuole essere giusto un esempio ma il tutto andrebbe elaborato secondo la reale situazione e le esigenze del caso.
 

PaoloG

Utente Attivo
23 Ago 2020
22
0
1
Salve, nel tuo ciclo while stai creando degli elementi che hanno lo stesso "id", quindi hai degli "id" duplicati all'interno dello stesso documento html.

Nella programmazione javascript, e in generale in html, è essenziale che gli "id" attribuiti agli elementi siano univoci. Il metodo getElementById() infatti restituisce un solo elemento, cioè il primo (e presumibilmente unico) che corrisponde all'id specificato. Ecco il motivo del comportamento da te menzionato.

Si può risolvere in vari modi a seconda delle esigenze.

Molto banalmente potresti usare degli "id" incrementali (ad es. "area1", "area2", "areaN") e di conseguenza passare tale valore alla tua funzione copia().

Un modo più ottimale può essere quello di usare dei riferimenti relativi in modo da poter risalire all'elemento text-input in base alla posizione gerarchica del button.

Un semplice esempio: supponiamo che l'elemento text-input sia posto sempre appena prima del button, sarebbe possibile usare previousElementSibling (come proprietà del button) per selezionare il relativo elemento text-input.

Il codice potrebbe essere una cosa di questo tipo:
HTML:
<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
  </head>
  <body>

        <div>
           <input type="text" value="Lorem ipsum">
           <button class="pulsante_copia">Copia</button>
        </div>
        <div>
           <input type="text" value="dolor sit amet">
           <button class="pulsante_copia">Copia</button>
        </div>
        <div>
           <input type="text" value="consectetur adipiscing elit">
           <button class="pulsante_copia">Copia</button>
        </div>

        <script>
            document.querySelectorAll('.pulsante_copia').forEach(btn => {
                btn.addEventListener('click', e => copiaTesto(btn.previousElementSibling));
            });
            function copiaTesto(el) {
                var txt = el.value;
                el.select();
                document.execCommand('copy');
                el.blur();
                alert('testo copiato: ' + txt);
            }
        </script>

    </body>
</html>

Chiaramente questo vuole essere giusto un esempio ma il tutto andrebbe elaborato secondo la reale situazione e le esigenze del caso.
Grazie per la risposta, tentando tentando avevo risolto con il metodo degli id incrementali:

PHP:
<button onclick="copia(\'area'.$i.'\')">Copia</button>

essendo quasi a zero con Javascript non avevo inserito la soluzione che ho trovato per non fare brutte figure:oops: , non sapevo se era un metodo corretto.
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Funzione copia nascosta Javascript 0
B Codice che disabilita la funzione di Copia Schermo? Javascript 1
Lino80 [Retribuito] Cerco programmatore php per modifica/inserimento funzione/valori da un plugin importer wordpress Offerte e Richieste di Lavoro e/o Collaborazione 0
R Variabile non risconosciuta dentro una funzione PHP 1
P Implementazione funzione FileReader Javascript 0
P Funzione jQuery Ajax invio file a php jQuery 1
A Funzione read URL PHP 6
F Funzione Glob - ricerca file contenente una parola PHP 1
A Mail con funzione mail() riconosciute come spam PHP 9
M Utilizzare la funzione mysql_num_rows() in PHP 5 PHP 3
A funzione iconv () non mi funziona PHP 4
D Come usare funzione php PHP 6
Y verificare condizione dopo esecuzione della funzione Programmazione 0
IClaude Funzione Javascript Javascript 8
A Funzione share come modificarla Social Media Marketing 0
L funzione onclik con seno e coseno non va Javascript 3
L funzione onclick non va Javascript 26
G modifica corretta funzione da eregi() a preg_match() PHP 3
Shyson Modificare funzione php PHP 15
L pdo (stampare un valore con ritorno a funzione) PHP 0
elpirata Funzione conversione da minuti in ore Javascript 0
@ [MS Access] Funzione Iif..is null... Database 0
F Funzione deprecata in PHP7 PHP 1
G [MS Access] Funzione ARROTONDA non definita nell'espressione MS Access 1
max1974 [Javascript] Funzione Errata procedura Javascript 2
pjtertdj Visualizzazione dati in php da mysql con funzione matematica in javascript PHP 1
Domenico_Falco1 Associare una stessa funzione get a due eventi a.click con classi differenti Ajax 6
psicomia Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select" Javascript 2
L Problema funzione mail() PHP PHP 3
elpirata [Javascript] Lo script alle volte funzione altre volte no Javascript 0
V [Visual Basic] Richiamare funzione su modulo per restituire list Visual Basic 0
R [Photoshop] funzione colore automatico Photoshop 0
maxnegri [PHP]Funzione di calcolo prezzo di una camera in un range di date PHP 62
L [PHP] problema count messo in una funzione. PHP 1
Monital funzione php si ripete due volte PHP 6
GiErre [PHP] [HTML] Disabilitare un link in funzione della piattaforma PHP 7
Monital Funzione php e campo database come variabile PHP 6
M Recuperare ID e usarlo in funzione jQuery 2
M PHP - Funzione non e scrive il risultato PHP 3
R [Javascript] Rendere una funzione sempre visibile Javascript 2
M funzione mysql che ritorna i microsecondi a partire dal 1-1-1970 MySQL 3
batmanLF [MySQL] Problema funzione SUM MySQL 1
F [PHP] La funzione setcookie PHP 0
F [Photoshop] sovrapporre due immagini usando funzione batch Photoshop 0
otto9due Capire la funzione del parametro event passato alla funzione.. jQuery 1
A [Javascript] tabella dinamica e onchange su funzione Javascript 1
M Problema con connessione MySqli e funzione PHP 2
C [RISOLTO][PHP] Funzione ONclick PHP 14
A [PHP] Problema invio mail con funzione mail() PHP 3
C Creazione di una funzione per il filtraggio dei campi di un db Presentati al Forum 0

Discussioni simili