How to enable HTML5 to implement mobile copy function

This article mainly introduces the HTML5 implementation of the mobile terminal copy function. The article also introduces the implementation code of using clipboard.js to implement the mobile terminal paste and copy function. Friends who need it can refer to it

First encounter When it came to this demand, I looked at various Baidu, but I found that they were basically implemented using js, and the compatibility was very poor.

But in the process of searching and trying, I found that it can be fully implemented with only css code. Just add the following lines of code to the tags that need to copy content.

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

In fact, it means that the user’s operation of the content is not restricted, the system default menu is not disabled, and long pressing will display the system’s own copy function for copying.

Use clipboard.js to realize mobile paste and copy

clipboard.js is a very powerful paste and copy plug-in, but in mobile When used on the end, compatibility issues may occur. Here's a solution I often use.

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('请选择“拷贝”进行复制!')
       });
   })

Note I am saving When copying content, use the input control, not p or span. Because, during testing, only input has the best compatibility, will not cause problems, and can ensure normal replication. At the same time, this plug-in does not support Safari version number

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement HTML5 page audio and video to automatically play under WeChat and app

H5 mobile phone image upload plug-in code

The above is the detailed content of How to enable HTML5 to implement mobile copy function. For more information, please follow other related articles on the PHP Chinese website!