JS复制文本框内文本

﹏ヽ暗。殇╰゛Y 2023-10-13 12:07 17阅读 0赞

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

示例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