Comment activer HTML5 pour implémenter la fonction de copie mobile

Cet article présente principalement HTML5 pour implémenter la fonction de copie mobile. L'article présente également le code d'implémentation de l'utilisation de clipboard.js pour implémenter la fonction de collage et de copie mobile. Les amis qui en ont besoin peuvent s'y référer

. Première rencontre En ce qui concerne cette demande, j'ai examiné différents Baidu, mais j'ai découvert qu'ils étaient essentiellement implémentés en utilisant js et que la compatibilité était très mauvaise.

Mais au cours du processus de recherche et d'essai, j'ai découvert que cela peut être entièrement réalisé avec uniquement du code CSS. Ajoutez simplement les lignes de code suivantes à la balise qui doit copier le contenu.

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

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

Utilisez clipboard.js pour réaliser un collage et une copie mobiles

clipboard.js est un plug-in de collage et de copie très puissant, mais sur mobile Lorsqu'il est utilisé à la fin, 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（要复制的内容）" readonly="readonly">
<p class="the_btn_con"><button class="btn" data-clipboard-target="#foo1">复制</button></p>

js

$(function () {
       var clipboard = new Clipboard('.btn');
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
       clipboard.on('success', function(e) {
           alert('复制成功!')
           console.log($(this))
           e.clearSelection();
       });
       clipboard.on('error', function(e) {
           alert('请选择“拷贝”进行复制!')
       });
   })

Notez que j'utilise le contrôle d'entrée au lieu de p ou span lors de l'enregistrement du contenu à copier. Parce que, 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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter l'audio et la vidéo d'une page HTML5 pour une lecture automatique sous WeChat et l'application

Téléchargement d'images de téléphone mobile H5 code du plug-in

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!