在項目中使用到復制粘貼功能，雖然網上有很多大牛封裝了很多的插件，但是還是想不去使用插件，就像自己來實現這個功能。

初步想法： 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 (<div className="common-copy-clip" onClick={() => this.handleCopy()}><textarea readOnly="readonly" id={this.props.ID} value={text}></textarea>{this.props.children}</div>)}}export default CopyClip2. css .common-copy-clip { position: relative; textarea {position: absolute;top: 0;opacity: 0; }

}

原文地址：https://segmentfault.com/a/1190000016894376

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的js实现复制粘贴功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。