HTML页面---复制按钮的使用(包含弹层)

greatwhole 发布于2019-08-29 12:23 / 2325人阅读

摘要：所以对不可用的设备，采用弹层，长按手动复制的方法。代码如下复制用的话，当页面过长，下面的部分不会覆盖。请长按选中下面虚线框中的内容进行复制点击关闭复制的时候得不到值，所以通过下面的方法更改。

先说一下我的整体方案：

用到了clipboard插件，官方地址和github地址，也可以参考中文说明。

clipboard插件实测：在PC端的浏览器（试了mac上的safari,chrome,firefox）可用，iOS 10.3上的safari可用，手机上的微信QQ浏览器能用，安卓手机自带的浏览器以及UC，不可用。所以对不可用的设备，采用弹层，长按手动复制的方法。

这里需要注意一点，当需要获取的标签为dispaly:none 的时候data-clipboard-target的方式得不到值，可用data-clipboard-text结合下面的方法。

var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);

代码如下：



    
        
        
        
        复制
        
        
    

    
        
            
                请长按选中下面虚线框中的内容进行复制：
                
                    hello world!

GPU云服务器云服务器页面包含的处理 html的包含 html包含的技术 html 弹层

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111858.html

HTML页面---复制按钮的使用(包含弹层)

摘要：所以对不可用的设备，采用弹层，长按手动复制的方法。代码如下复制用的话，当页面过长，下面的部分不会覆盖。请长按选中下面虚线框中的内容进行复制点击关闭复制的时候得不到值，所以通过下面的方法更改。先说一下我的整体方案：用到了clipboard插件，官方地址和github地址，也可以参考中文说明。 clipboard插件实测：在PC端的浏览器（试了mac上的safari,chrome,f...

mylxsw 2019-08-20 15:44 评论0 收藏0
移动端 h5开发相关内容总结(三)

摘要：就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。标签的属性应当与相关元素的属性相同。所以在和移动我分别用了两种方案，传统布局实现，弹性盒实现。前者是控制弹性盒的内容垂直方向居中，后者控制内容水平方向居中。之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。...

cnTomato 2019-08-19 17:33 评论0 收藏0
移动端 h5开发相关内容总结(三)

摘要：就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。标签的属性应当与相关元素的属性相同。所以在和移动我分别用了两种方案，传统布局实现，弹性盒实现。前者是控制弹性盒的内容垂直方向居中，后者控制内容水平方向居中。之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。...

antyiwei 2019-08-30 12:44 评论0 收藏0
移动端 h5开发相关内容总结(三)

摘要：就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。标签的属性应当与相关元素的属性相同。所以在和移动我分别用了两种方案，传统布局实现，弹性盒实现。前者是控制弹性盒的内容垂直方向居中，后者控制内容水平方向居中。之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。...

MonoLog 2019-08-01 15:02 评论0 收藏0