HTML5 implements mobile copy function

The first time I encountered this requirement was through Baidu, but I found that they were basically implemented using js, and the compatibility was very poor.

However, 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, and the system default menu is not disabled. Long pressing will display the system's built-in copy function for copying.

clipboard.js is a very powerful plug-in for pasting and copying, but when used on the mobile terminal, compatibility issues may arise. Here's a solution I often use.

html

 <input id=foo1 value=http://www.shellad.com/_2SP__22 (content to be copied) readonly=readonly><div class=the_btn_con><button class=btn data-clipboard-target=#foo1>Copy< /button></div>

js

 $(function () { var clipboard = new Clipboard('.btn'); //Graceful downgrade: Safari version number >=10, prompts that the copy is successful; otherwise, it prompts that you need to manually select the copy after selecting the text clipboard.on ('success', function(e) { alert('Copy successfully!') console.log($(this)) e.clearSelection(); }); clipboard.on('error', function(e) { alert('Please select copy to copy!') }); })

Note that I use an input control instead of a div or span when saving the content to be copied. Because, during testing, only input has the best compatibility, will not cause problems, and can guarantee normal replication. At the same time, the plug-in does not support Safari version number <10, so please be aware of this.

The above is the HTML5 implementation of mobile copy function introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!