在网上看了很多的帖子，发现用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;

原文链接：https://blog.csdn.net/Shimeng_1989/article/details/105677595