Copiar el valor de un input de una lista de varios input

 

En nuestras páginas o paneles muchas veces mostramos datos en los INPUT y es necesario copiarlos solo con el clic de un botón.

Este código funciona solo con JavaScript, debido a que ahora todos los navegadores trabajan con la última versión de JS que es bastante potente.

Cómo funciona

A cada INPUT se le asigna un ID para poder identificarlo y luego cada botón llama a la función copiar enviando como parámetro el mismo ID del INPUT. Al final la función se ejecuta recogiendo el parámetro, pero muy importante haciendo un escape del ID, seleccionando el valor del INPUT y finalmente copiándolo.

<input id="1" type="text" value="url1" /><button onclick="copiar(1)" type="button">Copiar</button>
<input id="12" type="text" value="url2" /><button onclick="copiar(12)" type="button">Copiar</button>
<input id="123" type="text" value="url3" /><button onclick="copiar(123)" type="button">Copiar</button>
<input id="1234" type="text" value="url4" /><button onclick="copiar(1234)" type="button">Copiar</button>
<input id="12345" type="text" value="url5" /><button onclick="copiar(12345)" type="button">Copiar</button>
<input id="123456" type="text" value="url6" /><button onclick="copiar(123456)" type="button">Copiar</button>
<input id="1234567" type="text" value="url7" /><button onclick="copiar(1234567)" type="button">Copiar</button>

<script>
    function copiar(id) {
    let copyInput = document.querySelector('#' + CSS.escape(id));
    copyInput.select();
    document.execCommand("copy");
}
</script>

Para hacerlo con un solo INPUT mira el siguiente ejemplo: https://webmasters.guiaplaza.com/2022/05/copiar-el-valor-de-un-input-con.html