js实现复制粘贴功能

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


初步想法：
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 = () =&gt; {let {ID} = this.props;let range, selection;let input = document.getElementById(ID);input.select();  // 获取到需要复制的内容if (input.value &amp;&amp; ((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 (&lt;div className="common-copy-clip" onClick={() =&gt; this.handleCopy()}&gt;&lt;textarea readOnly="readonly" id={this.props.ID} value={text}&gt;&lt;/textarea&gt;{this.props.children}&lt;/div&gt;)}}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实现复制粘贴功能相关推荐

JS一键复制粘贴功能
使用clipboard.js 实现: 它是一个不需要Flash,就能实现文本复制或者剪切到剪切板的轻量级插件: 具体实例: 可以使用cdn 或者直接下载设置好引用路径. <!DOCTYPE h ...
最新js实现复制粘贴功能实例
功能:实现鼠标点击复制内容描述:使用与手机网站.pc等端. 实现点击复制粘贴功能的代码实例: function common_copy(text){if(text.indexOf('-') !== ...
利用JS实现复制/粘贴功能
1.最基本的复制 Java代码 <script language="javascript"> function readTxt() { alert(window.cli ...
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能简介下载引入插件使用一个节点的复制多个节点的复制剪切文本框复制输入框简介 clipboard.js 提供了一种更好. ...
JS实现复制粘贴的方式
最近在项目中遇到了需要复制粘贴的功能,虽然是个简单的小功能,我竟然没做过,所以根据查找的资料还有实践在这里总结一下: JS实现复制粘贴方式: 原生通过document.execCommand('cop ...
clipboard + element-ui +vue 实现复制粘贴功能与提示
结合 clipboard.js 实现复制.粘贴功能剪切功能参考官方文档,个人认为用不太上(有富文本编辑器的时候可能才用得上,也或许不需要自己实现) 想要知道怎么使用,优先参考官方文档(如何指定要复制 ...
html5屏蔽ios长按复制,html5+CSS 实现禁止IOS长按复制粘贴功能
html5+CSS 实现禁止IOS长按复制粘贴功能因为在移动端APP需要实现长按执行别的事件,但是在iOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法. ...
软件测试面试题-如何测试复制粘贴功能
复制粘贴是电脑最普遍的两个操作了,在面试的过程中,有学生被问到如何测试复制粘贴功能的时候,我个人觉得你可以这样去回答更多学习资源,公众号主页点击领取资料查看我评论区置顶首先,这道题目你甚至可以发 ...
Windows下Ubuntu子系统，开启复制粘贴功能方法
Windows下Ubuntu子系统,开启复制粘贴功能方法问题我在Microsoft Store下载了Ubuntu后,进入系统发现复制粘贴不上去解决方法右键单击我们打开的Ubuntu终端顶部,下 ...

js实现复制粘贴功能

js实现复制粘贴功能相关推荐

最新文章

热门文章