使用execCommand剪切板的两种方法（input与textarea）

最近在使用execCommand剪切板时，发现一个有趣的地方，即复制出来的内容不能换行。

检查后发现，这是因为我使用了’input’这个元素，众所周知，input元素作为一个输入框，它是不能换行的，如果你尝试换行，最后会自动转换为空格。

原代码（input写法）

const copyFn = () => {
  val.value = `
我是要复制的第一行 
我是要复制的第二行
  `
  // createElement() 方法通过指定名称创建一个元素
  var copyInput = document.createElement('input')
  //val是要复制的内容
  copyInput.setAttribute('value', val.value) // 使用setAttribute为input赋予新的属性
  document.body.appendChild(copyInput)
  copyInput.select() // 意为选中文本，使用它可以实现更便捷的复制，而不需要去创建新的对象
  try {
    var copyed = document.execCommand('copy')
    if (copyed) {
      document.body.removeChild(copyInput)
      ElMessage('复制成功')  // element组件，可以去掉或用类似组件替换
    }
  } catch {
    ElMessage('复制失败，请检查浏览器兼容')
  }
}

如果我们尝试这种写法，最后的结果将会是
***我是要复制的第一行 我是要复制的第二行 ***