JS复制文本


注意这里不是复制选中内容的文本,而是复制文本框中的文本内容。

示例1:复制input输入框的内容

var content = 'this is a content!'
function copyText(content) {
      if (!content) {
        alert('复制内容为空')
        return
      }
      let cInput = document.createElement("input")
      document.body.appendChild(cInput)
      cInput.select() // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中(这里就是创建的input标签)
      // Input要在正常的编辑状态下原生复制方法才会生效
      document.execCommand("copy")
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput)
      alert('复制成功!')
}

===> 输出
this is a content!

注:这里为什么使用textarea标签?因为textarea标签支持换行、制表等。

示例2:复制textarea内容,以换行形式输出

var content = '1,2,3,4,5,6,7,8,9'
function copyText(content) {
      if (!content) {
        alert('复制内容为空')
        return
      }
      let cInput = document.createElement("textarea")
  		cInput.value = content?.replaceAll(',', '\n')
      document.body.appendChild(cInput)
      cInput.select() // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中(这里就是创建的input标签)
      // Input要在正常的编辑状态下原生复制方法才会生效
      document.execCommand("copy")
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput)
      alert('复制成功!')
}

====> 输出
1
2
3
4
...

示例3:复制textarea内容,以表格和换行形式输出

var content = '1,2,3;4,5,6;7,8,9'
function copyText(content) {
      if (!content) {
        alert('复制内容为空')
        return
      }
      let cInput = document.createElement("textarea")
      // 按分号换行,按逗号Tab(具体分割方式还需要看文本内容)
  		cInput.value = content?.replaceAll(',', '\t').replaceAll(';', '\n')
      document.body.appendChild(cInput)
      cInput.select() // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中(这里就是创建的input标签)
      // Input要在正常的编辑状态下原生复制方法才会生效
      document.execCommand("copy")
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput)
      alert('复制成功!')
}

===> 输出
1	 2    3
4	 5    6
7    8    9
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白说(๑• . •๑)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值