J'ai récemment travaillé sur un projet front-end, dans lequel il était nécessaire de copier directement les valeursdans la zone de saisie ou de texte vers le presse-papiers via des boutons. Ci-dessous, l'éditeur partagera avec vous mes idées d'implémentation et mon code, et vous pourrez les introduire directement dans le projet.
Le code spécifique est le suivant :
function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"; var origSelectionStart, origSelectionEnd; if (isInput) { // can just use the original source element for the selection and copy target = elem; origSelectionStart = elem.selectionStart; origSelectionEnd = elem.selectionEnd; } else { // must use a temporary form element for the selection and copy target = document.getElementById(targetId); if (!target) { var target = document.createElement("textarea"); target.style.position = "absolute"; target.style.left = "-9999px"; target.style.top = "0"; target.id = targetId; document.body.appendChild(target); } target.textContent = elem.textContent; } // select the content var currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // copy the selection var succeed; try { succeed = document.execCommand("copy"); } catch(e) { succeed = false; } // restore original focus if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } if (isInput) { // restore prior selection elem.setSelectionRange(origSelectionStart, origSelectionEnd); } else { // clear temporary content target.textContent = ""; } return succeed; }
On peut appeler cette méthode directement comme ceci :
copyToClipboard(document.getElementById("name"));
De cette façon, la valeur avec le nom d'identification est saisie dans la table de montage.
L'éditeur vous présentera ici le code JavaScript pour copier du contenu dans le presse-papier.