js --- execCommand('copy')复制文本到剪切板换行符不生效

摘要:
原因:之前有一个右键单击复制文本的功能。当时,复制文本的新行字符无效。我使用解决方案1来解决问题,因为时间太短。然而,用户在上线后并没有为此付费,因为剪贴板的内容总是在没有换行符的情况下得到解决:有问题的代码1letinputNode=document。createElement('input')2if(contextmanuChatRecord.msgType==MESSAGE_SUB_TY

起因:

  之前需求有个右击复制文本的功能,当时出现的情况是复制后文本的换行符无效了,因为当时时间比较赶,我就用了方案一解决的,但是上线后用户不买单呀,因为剪切板的内容始终是不带换行符的

解决:

  有问题的代码

  

 1                 let inputNode = document.createElement('input')
 2                 if (contextmenuChatRecord.msgType === MESSAGE_SUB_TYPE.VMA_TEXT_ELEM) {
 3                     // inputNode.value = JSON.stringify(contextmenuChatRecord.content)
 4                     inputNode.value = contextmenuChatRecord.content
 5                     this.$emitBus('copyTextMsg', contextmenuChatRecord.content)
 6                 } else {
 7                     inputNode.value = JSON.stringify(contextmenuChatRecord)
 8                 }
 9                 let copyContentDom = this.$el.querySelector('#copy-content')
10                 copyContentDom.appendChild(inputNode)
11                 inputNode.select()
12                 document.execCommand('copy')
13                 copyContentDom.removeChild(inputNode)
14                 inputNode = null

这里要穿插一下 这种写法肯定是没问题的 问题出在HTML标签上 HTML的input标签是不支持换行的所以问题就卡在这 

当然解决也很简单 createElement('input') 修改成 document.createElement('textarea')

免责声明:文章转载自《js --- execCommand('copy')复制文本到剪切板换行符不生效》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇SQL Server表的数据量大小查询NPOI 自定义单元格背景颜色-Excel下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

用gulp清除、移动、压缩、合并、替换代码

之前前端代码部署时用的是grunt,后来又出了个gulp工具,最近试用了一下,很方便,感觉比grunt简单好用,下面把一些常见的任务列一下,备用。 var gulp = require('gulp'); var sdir = '0.0.1'; var ddir = '0.0.1.release'; var gutil = require('gulp-u...

js获取一个对象的所以属性和值

在HTML DOM中,获取某个元素对象的时候,往往记不住它的很多属性,可以通过下面的例子来查找一下: 1 <!DOCTYPE html> 2 <html> 3 <body> 4 <h1>获取对象属性和值</h1> 5 <div id="div1" class="di...

01 Vue基础

1. vue 概述# Vue:渐进式JavaScript框架 vue官网 https://cn.vuejs.org/v2/guide/ 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩 高效:20kB运行大小,超快虚拟DOM 2...

babel.config.js 和 .babelrc 对比

Babel 有两种并行的配置文件格式,可以一起使用,也可以分开使用。 项目范围的配置 babel.config.js 文件,具有不同的拓展名(json、js、html)babel.config.js 是按照 commonjs 导出对象,可以写js的逻辑。 相对文件的配置 .babelrc 文件,具有不同的拓展名 总结:baberc 的加载规则是按目录加载的...

JS兼容性问题(FF与IE)

不同浏览器中js兼容问题大全 1.document.formName.item('itemName')问题 说明: 1 //IE下(两种) 2 document.formName.item("itemName"); 3 document.formName.elements ["elementName"]; 4 //Firefox下 5 document.f...

扫码枪扫码触发接口传递参数(实例)

前两天因为业务需要,研究了一下扫码枪,得出了两个笨方法,用于扫码后调用接口传输数据 方法一: 1.先生成一个二维码,改二维码里的数据就是你要请求需要向接口所传递的数据 2.然后写一个html页面,里面就放一个input框就好了,这个input框就是用来接收你二维码里面的数据的 3.写一段js,让用户打开页面后input自动永久聚焦 4.再写一段js,检测i...