js實(shí)現(xiàn)復(fù)制粘貼功能

Steven 發(fā)布于2019-08-23 12:43 / 1142人閱讀

摘要：在項(xiàng)目中使用到復(fù)制粘貼功能，雖然網(wǎng)上有很多大牛封裝了很多的插件，但是還是想不去使用插件，就像自己來實(shí)現(xiàn)這個(gè)功能。

在項(xiàng)目中使用到復(fù)制粘貼功能，雖然網(wǎng)上有很多大牛封裝了很多的插件，但是還是想不去使用插件，就像自己來實(shí)現(xiàn)這個(gè)功能。

初步想法：
1. 獲取到需要復(fù)制的內(nèi)容，這里我可以將需要復(fù)制的內(nèi)容放在input或者textarea的value中，然后使用input的select()方法來獲取到值；
2. 獲取到值了，那我下一步就是復(fù)制了，document.execCommand()方法可以操作很多功能，這里我可以使用他的copy復(fù)制選中的文字到粘貼板的功能；
3. 復(fù)制功能實(shí)現(xiàn)了，但是這個(gè)input或者textarea不是我頁面布局中所需要的，那我可以將input或者textarea設(shè)置成透明的；
代碼實(shí)現(xiàn)：
1. js：

   import React, {PureComponent} from "react";
    import PropTypes from "prop-types";
    import "./index.less"
    class CopyClip extends PureComponent {
     static propTypes = {
    text: PropTypes.any, //文字內(nèi)容
    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();  // 獲取到需要復(fù)制的內(nèi)容
        if (input.value && ((typeof input.select) == "function")) {
          range = document.createRange();  // 創(chuàng)建range對(duì)象
          selection = document.getSelection();  // 返回一個(gè)Selection 對(duì)象，表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置。
          range.selectNode(input);
                  selection.addRange(range);
          input.setSelectionRange(0, input.value.length);  // 為當(dāng)前元素內(nèi)的文本設(shè)置備選中范圍
          let successful = document.execCommand("copy");  //  使用document.execCommand()方法， copy指令復(fù)制選中的文字到粘貼板的功能
          if (!successful) {
            this.props.onCopy(false);
            window.clipboardData.setData("text", this.state.text);  // 解決部分瀏覽器復(fù)制之后沒有粘貼到粘貼板，使用瀏覽器自帶的粘貼板
          } 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;
}

}