Funzione copia multipla.

PaoloG · 8 Apr 2021

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 · 10 Apr 2021

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 · 11 Apr 2021

WmbertSea ha scritto:
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

, non sapevo se era un metodo corretto.

Cerca

Cerca

Funzione copia multipla.

PaoloG

Utente Attivo

WmbertSea

Moderatore

PaoloG

Utente Attivo

Discussioni simili