Copie au bloc-notes avec Jquery / js en Chrome

Vous pouvez utiliser document.execCommand('copy') ou addEventListener('copy') , ou une combinaison des deux.

1. sélection de copies sur l'événement personnalisé

si vous voulez déclencher un copy sur un autre événement que ctrl-c ou une copie de clic droit, vous utilisez document.execCommand('copy') . Il copiera ce qui est actuellement sélectionné. Comme ceci, sur mouseup par exemple:

elem.onmouseup = function(){
    document.execCommand('copy');
}

EDIT:

document.execCommand('copy' ) est supporté seulement par Chrome 42 , IE9 et Opera 29 , mais sera supporté par firefox 41 (prévu pour septembre 2015). Notez QU'IE demande normalement la permission d'accéder au presse-papiers.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

2. copier le contenu personnalisé sur la copie déclenchée par l'utilisateur

ou, vous pouvez utilisez addEventListener('copy') , cela interférera avec l'événement de copie et vous pouvez y mettre le contenu que vous voulez. Cette supposons que l'utilisateur déclenche la copie.

EDIT:

sur Chrome, Firefox et Safari l'événement a l'objet clipboardData avec la méthode setData . Sur IE , l'objet clipboardData est une propriété de fenêtre. Donc cela peut fonctionner sur tous les principaux navigateurs à condition que vous validez où est clipboardData .

 elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData https://msdn.microsoft.com/en-us/library/ms535220 (v=vs 85).aspx

3. un peu des deux

en utilisant une combinaison, vous pouvez copier du contenu personnalisé sur des événements désirés. Donc le premier événement déclenche execCommand , puis le listener interfère. Par exemple, mettez du contenu personnalisé sur un clic sur une div.

  elem3.onclick = function () {
        document.execCommand('copy');
    }

   elem3.addEventListener('copy', function (e) {

    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content from click');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content from click');
    }

});

en utilisant ce dernier suppose que les deux approches sont soutenues, à partir de juillet 2015, il ne fonctionne que sur Chrome 43 (peut-être 42 Je n'ai pas pu tester) et IE au moins 9 et 10. Avec Firefox 41 supportant execcommand('copy') , ça devrait marcher aussi.

notez que pour la plupart de ces méthodes et propriétés sont déclarées soit comme expérimentales (ou même dépréciées pour IE), il est donc à utiliser avec soin, mais il semble que c'est plus et plus pris en charge.

violon avec tous les exemples: https://jsfiddle.net/jsLfnnvy/12 /

chaîne de caractères Variable peut copier au bloc-notes en utilisant le code ci-dessous js.

var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
 position: "absolute",
 left: "-1000px",
 top: "-1000px",
});
 copyFrom.text(text);
 $('body').append(copyFrom);
 copyFrom.select();
 document.execCommand('copy');

en fait, pour ceux qui ont compris ça, j'ai réussi à le faire fonctionner en chrome sur la base de la réponse de @JulianGregoire.

j'ai réécrit le code pour le rendre un peu meilleur à mon avis:

el.onclick = function () {
    var copy = function (e) {
        e.preventDefault();
        console.log('copy');
        var text = "blabla"
        if (e.clipboardData) {
            e.clipboardData.setData('text/plain', text);
        } else if (window.clipboardData) {
            window.clipboardData.setData('Text', text);
        }
    }
    window.addEventListener('copy', copy);
    document.execCommand('copy');
    window.removeEventListener('copy', copy);
}

attention: J'ai essayé exactement le même script de Julien Grégoire, mais il n'a pas déclenché l'auditeur oncopy event. La raison, j'ai eu l'utilisateur-choisir CSS pour le corps-étiquette.

Donc, assurez-vous de retirer, ou initial sur l'élément de l'écouteur d'événement est attaché.

exemple: https://jsfiddle.net/faimmedia/jsLfnnvy/80 /

si vous utilisez knockout, comme moi (pour une raison quelconque je suis toujours), vous voudrez jeter un oeil à cette question/réponse:

Comment faire fonctionner KnokoutJS et ClipboardJS ensemble?

function copyToClipboard(s) {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', s);
    }
}

alors appelez la fonction avec le texte et cela devrait fonctionner.