HTML5完成挪动端拷贝作用

日期:2021-02-23 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

最先遇到这个要求是就各种各样百度搜索,可是发现基础全是用js完成,并且适配性还十分不太好。

可是在追寻和尝试的全过程中,发现只必须css编码还可以彻底完成的,对必须拷贝內容的标识再加下面这几行编码便可以了。

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

实际上意思便是不限定客户对內容的实际操作,禁不住用系统软件默认设置菜单,长按会显示信息系统软件自带的拷贝作用开展拷贝。

应用clipboard.js完成挪动端粘贴拷贝

clipboard.js是1款很强劲的粘贴拷贝的软件,可是在挪动端应用,会出現适配性难题。下面是我常应用的1种处理计划方案。

html

<input id="foo1"  value="http://www.shellad.com/_2SP__22(要拷贝的內容)" readonly="readonly">
<div class="the_btn_con"><button class="btn" data-clipboard-target="#foo1">拷贝</button></div>

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('请挑选“复制”开展拷贝!')
       });
   })

留意我在储存要拷贝的內容时应用的是input控制,而并不是div或span。由于,在检测时仅有input的适配性最好是,不容易出現难题,可以确保一切正常拷贝。另外,该软件也不适用safari 版本号号<10,因此要做好提醒。
 

总结

以上所述是网编给大伙儿详细介绍的HTML5完成挪动端拷贝作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:html5 figure和figcaption的应用方式 返回下一篇:没有了