【JS】点击文本复制到剪贴板实现

【引言】

在前两周完善了一些关于与ERP对接项目日志方面的功能，对于与第三方系统对接的系统来说，记录每一次接口调用的参数返回结果是极其重要的，日志记录越完善，越有利于以后查问题。

日志记录没有用什么框架，就是单纯的有个接口日志表，每个接口调用都会记录这一次调用的参数，请求地址，返回结果等信息。而为了方便以后运营或相关人员可以自己登录系统查到调用的日志记录，完善了系统页面功能。

下面是系统接口日志查询页面：

这样一个页面，我们可以通过订单号/退货单号等关键字信息搜索到相关的接口调用日志，查看结果是怎样的。而页面的展示是有限的，这样一来，结果内容过长，还是不知道结果是什么。

想到之前会从网页上搜索相关maven jar包的引用，只需要鼠标一点击到对应的文本框内容，整个引用就直接复制到剪切板，直接ctrl + v 粘贴到项目中即可。这点是让我印象很深刻的一个体验。

所以，找前端给我写了个这样的功能，只要鼠标点击到某条记录对应的参数或结果，就可以将内容复制到剪切板，从而可以直接粘贴到json在线解析工具中解析，结果一目了然。

【实现】

前端用的vue，看了看代码，如此强大好用的功能，代码其实很简单，如下：

// 页面渲染，点击调用复制方法
return h('div', [h('span', {style: {display: 'inline-block',width: '100%',overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'},domProps: {title: params.row.result},on: {click: (e) => {this.copyToClipboard(params.row.result);this.$Message.success('复制成功！');}}}, params.row.result)])// js 点击复制到剪贴板函数
copyToClipboard(s){if(window.clipboardData){window.clipboardData.setData('text',s);}else{(function(s){document.oncopy=function(e){e.clipboardData.setData('text',s);e.preventDefault();document.oncopy=null;}})(s);document.execCommand('Copy');}}

【总结】

用户的体验是很重要的。开发的时候，多想一点，多做一点，对自己也是一种提升。
这一功能的实现，是自己要求前端给我加上的。从结果来看，既减少了自己的工作量，又得到了老大的肯定，双赢的效果。

【JS】点击文本复制到剪贴板实现相关推荐

python-将文本复制到剪贴板与键盘监听
文章目录将文本复制到剪贴板键盘监听控制鼠标,监听和点击控制键盘,监听和点击将文本复制到剪贴板 python十分方便的就是导包,神器 import pyperclip # 复制到粘贴板 pyp ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
使用Java将文本复制到剪贴板
参考文章 Java操作系统剪贴板实现复制和粘贴-蒲公英云 Java实现拷贝内容到系统剪切板中 - LinuxSuRen - OSCHINA - 中文开源技术交流社区使用Java将文本复制到剪贴板关 ...
如何使用 JavaScript 将文本复制到剪贴板？
异步剪贴板 API 构建网站时一个非常普遍的需求是能够通过单击按钮将文本复制到剪贴板.如果您只需要支持现代浏览器,强烈建议使用异步剪贴板 API.它在所有现代浏览器中都受支持,并提供了一种简单安全的方 ...
JS 将指定内容复制到剪贴板
除了使用一些插件(vue-clipboard2等等)来完成这个功能,其实使用原生JS就可以实现了: const data = 'xxx' // 需要复制到剪贴板的内容 const input = do ...
Android 3行代码将文本复制到剪贴板
ClipboardManager类:剪贴板服务(ClipboardService)的接口,用于在全局剪贴板中放置和检索文本.(我们通过这个类的来把ClipData类的数据复制到剪贴板) ClipDat ...
js 点击文本框，预览选择图片
点击文件选择框,选择图片文件,通过FileReader对象,读取图片文件中的内容,存放于result中,具体代码如下 <input type="file" onchange= ...
vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
单击按钮使用jQuery复制到剪贴板
本文翻译自:Click button copy to clipboard using jQuery How do I copy the text inside a div to the clipboa ...
如何在Vim中复制到剪贴板？
是否可以直接从Vim复制到剪贴板? yy只复制东西给Vim的内部缓冲区. 我想复制到操作系统的剪贴板. 在Vim中有没有这样的命令,或者你只能在Vim中猛拉东西? #1楼在vimrc文件中,您可以指 ...

【JS】点击文本复制到剪贴板实现

【引言】

【实现】

【总结】

【JS】点击文本复制到剪贴板实现相关推荐

最新文章

热门文章