在网上看了很多的帖子，发现用input是不可以的（多数帖子都是用的input），要用textarea。
我主要是用来复制后端传来的日志文档
情景：返回的list列表中，需要有复制功能，可以复制当前内容，并且 当前内容有需要换行的需求。 代码如下：（vue项目）
HTML：
<ul>
<li v-for='(item,key) in content' :key='key' @click="copyContent(item)" style='white-space: pre-wrap;'>
{{item}}
</li>
</ul>
JS：
data() {
return{
item:[{
content:'内容1\r\n内容被换行'
},{
content:'内容2'
},{
content:'内容3\r\n \r\n内容被换行'
},{
content:'内容4'
}]
}
},
methods:{
//复制按钮
copyContent(text){
this.copyText(text,(words) => {
//复制成功后，弹出复制成功element-ui弹窗，提示:内容复制成功！
this.SUCC_MSGBOX('内容' + words + '!')
})
},
// 复制方法
copyText(text, callback) {
// text: 要复制的内容， callback: 回调 - 复制成功后的操作
//以下创建标签，根据需求来选取
var tag = document.createElement('textarea') //textarea：标签会识别换行符，且后台返回换行符时不能转义 \r\n(Chrome浏览器返回↵ 字符，不是\r\n），如果换行符被转义，则会直接显示出来，无换行的功能了
// var tag = document.createElement('input') //input 复制出来的内容无法换行，即使有换行符 ↵ 或 \r\n
tag.setAttribute('id', 'cp_hgz_input')
tag.value = text
document.getElementsByTagName('body')[0].appendChild(tag)
document.getElementById('cp_hgz_input').select()
document.execCommand('copy')
document.getElementById('cp_hgz_input').remove()
if (callback) {
callback('复制成功')
}
},
}
页面如果不能换行显示，添加css样式：white-space: pre-wrap;
原文链接：/Shimeng_1989/article/details/105677595
