HTML5 implémente la fonction de copie mobile

La première fois que j'ai rencontré cette demande, c'était via divers Baidu, mais j'ai découvert qu'ils étaient essentiellement implémentés en utilisant js et que la compatibilité était très mauvaise.

Cependant, au cours du processus de recherche et d'essai, j'ai découvert qu'il pouvait être entièrement implémenté avec uniquement du code CSS. Ajoutez simplement les lignes de code suivantes aux balises qui doivent copier le contenu.

 -webkit-touch-callout : tous ;-webkit-user-select : tous;-moz-user-select : tous;-ms-user-select : tous;

En fait, cela signifie que l'utilisation du contenu par l'utilisateur n'est pas restreinte et que le menu par défaut du système n'est pas désactivé. Un appui long affichera la propre fonction de copie du système pour la copie.

clipboard.js est un plug-in très puissant pour coller et copier, mais lorsqu'il est utilisé sur le terminal mobile, des problèmes de compatibilité peuvent survenir. Voici une solution que j'utilise souvent.

HTML

 <input id=foo1 value=http://www.shellad.com/_2SP__22 (contenu à copier) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>Copier< /bouton></div>

js

 $(function () { var clipboard = new Clipboard('.btn'); // Rétrogradation gracieuse : numéro de version de Safari >=10, indique que la copie est réussie ; sinon, il vous invite à sélectionner manuellement la copie après sélection du texte clipboard.on ('succès', function(e) { alert('Copier avec succès !') console.log($(this)) e.clearSelection(); }); fonction(e) { alert('Veuillez sélectionner copier à copier !') } })

Notez que j'utilise un contrôle d'entrée au lieu d'un div ou d'un span lors de l'enregistrement du contenu à copier. Car, lors des tests, seules les entrées ont la meilleure compatibilité, ne poseront pas de problèmes et peuvent garantir une réplication normale. Dans le même temps, le plug-in ne prend pas en charge le numéro de version Safari <10, veuillez donc en être conscient.

Ce qui précède est l'implémentation HTML5 de la fonction de copie mobile introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !