js实现复制粘贴功能

Steven 发布于2019-08-23 12:43 / 1134人阅读

摘要：在项目中使用到复制粘贴功能，虽然网上有很多大牛封装了很多的插件，但是还是想不去使用插件，就像自己来实现这个功能。

在项目中使用到复制粘贴功能，虽然网上有很多大牛封装了很多的插件，但是还是想不去使用插件，就像自己来实现这个功能。

初步想法：
1. 获取到需要复制的内容，这里我可以将需要复制的内容放在input或者textarea的value中，然后使用input的select()方法来获取到值；
2. 获取到值了，那我下一步就是复制了，document.execCommand()方法可以操作很多功能，这里我可以使用他的copy复制选中的文字到粘贴板的功能；
3. 复制功能实现了，但是这个input或者textarea不是我页面布局中所需要的，那我可以将input或者textarea设置成透明的；
代码实现：
1. js：

   import React, {PureComponent} from "react";
    import PropTypes from "prop-types";
    import "./index.less"
    class CopyClip extends PureComponent {
     static propTypes = {
    text: PropTypes.any, //文字内容
    ID: PropTypes.string
     };
    static defaultProps = {
    ID: "copy-clip-textarea",
    };
     constructor(props) {
        super(props);
        this.state = {}
      }
      componentWillMount() {
        const {text} = this.props;
        this.setState({
          text
        })
      }
      componentWillReceiveProps(nextProps) {
        const {text} = nextProps;
        this.setState({
          text
        })
      }
      handleCopy = () => {
        let {ID} = this.props;
        let range, selection;
        let input = document.getElementById(ID);
        input.select();  // 获取到需要复制的内容
        if (input.value && ((typeof input.select) == "function")) {
          range = document.createRange();  // 创建range对象
          selection = document.getSelection();  // 返回一个Selection 对象，表示用户选择的文本范围或光标的当前位置。
          range.selectNode(input);
                  selection.addRange(range);
          input.setSelectionRange(0, input.value.length);  // 为当前元素内的文本设置备选中范围
          let successful = document.execCommand("copy");  //  使用document.execCommand()方法， copy指令复制选中的文字到粘贴板的功能
          if (!successful) {
            this.props.onCopy(false);
            window.clipboardData.setData("text", this.state.text);  // 解决部分浏览器复制之后没有粘贴到粘贴板，使用浏览器自带的粘贴板
          } else {
            this.props.onCopy(true)
          }
        } else {
         this.props.onCopy(false)
        }
     };
      render() {
        const {text} = this.state;
        return (
           this.handleCopy()}>
            
            {this.props.children}
          
        )
      }
    }
    export default CopyClip

2. css 
.common-copy-clip {
position: relative;
textarea {
    position: absolute;
    top: 0;
    opacity: 0;
}

}

GPU云服务器云服务器 js手机复制粘贴功能复制粘贴js代码 js复制到粘贴板 JS留言功能实现

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

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

使用clipboard实现前端页面复制到粘贴板的功能

摘要：最近公司需要做一个实现复制的功能，本来以为会是很简单两三行代码的事，后来发现网上说的那些原生实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方的库。最近公司需要做一个js实现复制的功能，本来以为会是很简单两三行js代码的事，后来发现网上说的那些原生js实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方...

Astrian 2019-08-21 16:01 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 评论0 收藏0
前端er怎样操作剪切复制以及禁止复制+破解等

摘要：取消默认的复制事件被复制的文字等下插入防知乎掘金复制一两个字则不添加版权信息超过一定长度的文字就添加版权信息作者链接来源掘金著作权归作者所有。以上参考资料高程操作剪贴板网页上如何实现禁止复制粘贴以及如何破解原生实现点击按钮复制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

DevTalking 2019-08-02 11:11 评论0 收藏0
移动端复制文本到粘贴板，clipboard.js的使用，移动端与PC端复制粘贴兼容写法

摘要：首先引用文本文档要用复制按钮要用去掉文字检查，不可编辑，插件自带的属性样式代码至此，兼容移动端和端的复制粘贴功能完美实现，感谢作者作者来源原文版权声明本文为博主原创文章，转载请附上博文链接 1.首先引用clipboard.js 2.html 文本文档要用textarea,复制按钮要用button 9999999 spellcheck=false去掉文字检查，readonly不可编辑...

legendmohe 2019-08-23 16:28 评论0 收藏0