<div class="d-flex flex-row justify-content-between"> <p class="mb-0 me-1 py-2 ps-4 add-text" id="p1">ygwbfewilskfhnewisfklnewiofjfhjky</p> <button class="btn-primary w-20 px-3 copy-btn" onclick="copyToClipboard('#p1')">Copy<i class="fa-regular fa-copy ps-2"></i></button> </div>JS:
function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); }Quiero copiar el texto en p id="p1".
Probé este método porque vi que le funcionaba a otra persona, pero a mí no me funciona.
Su código es bueno y no tiene nada de malo. Creo que es posible que hayas olvidado agregarle jQuery. Puede hacer esto agregando el siguiente código en su etiqueta <head> de su código HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Su código funciona completamente bien, puede verlo aquí . Si aún no funciona, probablemente tenga JavaScript bloqueado. Verifique para asegurarse de que no tiene una extensión que bloquee JS y verifique también la configuración de su navegador para asegurarse de que JS esté permitido.
(Debo tener el código ya que es un enlace codepen)
<div class="d-flex flex-row justify-content-between"> <p class="mb-0 me-1 py-2 ps-4 add-text" id="p1">ygwbfewilskfhnewisfklnewiofjfhjky</p> <button class="btn-primary w-20 px-3 copy-btn" onclick="copyToClipboard('#p1')">Copy<i class="fa-regular fa-copy ps-2"></i></button> </div> function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); }Aquí hay una versión vainilla de hacerlo así. Si lee la publicación de blog en mi comentario sobre la pregunta OP, el método jQuery se basa en Adobe Flash y no es totalmente compatible con todos los navegadores.
function copyToClipboard() { var range = document.createRange(); range.selectNode(document.getElementById("p1")); window.getSelection().removeAllRanges(); // clear current selection window.getSelection().addRange(range); // to select text document.execCommand("copy"); window.getSelection().removeAllRanges();// to deselect } <div class="d-flex flex-row justify-content-between"> <p class="mb-0 me-1 py-2 ps-4 add-text" id="p1">ygwbfewilskfhnewisfklnewiofjfhjky</p> <button class="btn-primary w-20 px-3 copy-btn" onclick="copyToClipboard('#p1')">Copy<i class="fa-regular fa-copy ps-2"></i></button> </div>