输入框贴贴去除样式并插入到指定光标位置（contenteditable=“true“ 实现的输入框也支持）

最新推荐文章于 2024-01-22 10:32:04 发布

卡尔特斯

最新推荐文章于 2024-01-22 10:32:04 发布

阅读量630

点赞数

分类专栏： JavaScript Html 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zz00008888/article/details/121477596

版权

Html 同时被 2 个专栏收录

51 篇文章 8 订阅

订阅专栏

JavaScript

41 篇文章 2 订阅

订阅专栏

方式一效果，原格式，去除样式保持原换行空格之类的格式：

方式二效果：

方式三效果：

推荐 `方式三`，扩展性高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 输入框 */
    #dzm-textarea {
      padding: 5px;
      border: 1px solid red;
    }
    /* 输入框为空时显示 placeholder */
    #dzm-textarea:empty:before {
      content: attr(placeholder);
      color: red;
    }
    /* 输入框获取焦点时移除 placeholder */
    #dzm-textarea:focus:before {
      content: none;
    }
  </style>
</head>
<body>
  <!-- textarea -->
  <div id="dzm-textarea" contenteditable="true" placeholder="请输入内容" style="resize: both; overflow: auto;"></div>
  <script>
    // 支持全部替换（部分浏览器不自带）
    String.prototype.replaceAll = function (s1, s2) {
        return this.replace(new RegExp(s1, "gm"), s2)
    }

    // 获取标签
    var textarea = document.getElementById('dzm-textarea')

    // 贴贴事件
    textarea.onpaste = function (e) {
      // 禁止冒泡
      e.preventDefault()
      // 处理事件
      // handlePaste1(e)
      // handlePaste2(e)
      handlePaste3(e)
    }
    
    // 方式一：走 execCommand 会保留文本原格式，走上面 if 不会保留原格式跟 方式二 一样
    function handlePaste1 (e) {
      // 内容
      var text = ''
      // 贴贴数据
      var clp = (e.originalEvent || e).clipboardData
      // 贴贴内容
      if (clp && clp.getData) {
        text = clp.getData('text/plain') || ''
      } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData('text') || ''
      }
      // 内容不为空
      if (text !== '') {
        // 数据是否满足指定格式
        if (clp === undefined || clp === null) {
          // 是否有光标位置
          if (window.getSelection) {
            // 有则插入指定位置
            var newNode = document.createElement('span')
            newNode.innerHTML = text
            window.getSelection().getRangeAt(0).insertNode(newNode)
          } else {
            // 没有则直接贴贴
            document.selection.createRange().pasteHTML(text)
          }
          // 需要手动调用 oninput 输入事件
        } else {
          // 插入内容，会自动调用 oninput 输入事件
          document.execCommand('insertText', false, text)
        }
      }
    }

    // 方式二：不会保留文本原格式，需要手动调用 oninput 输入事件
    function handlePaste2 (e) {
      // 内容
      var text = ''
      // 贴贴事件
      var clp = (e.originalEvent || e).clipboardData
      // 贴贴内容
      if (clp && clp.getData) {
        text = clp.getData('text/plain') || ''
      } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData('text') || ''
      }
      // 内容不为空
      if (text !== "") {
        // 获取光标位置
        if (window.getSelection) {
          // 有位置则插入光标位置
          var newNode = document.createElement("span")
          newNode.innerHTML = text
          window.getSelection().getRangeAt(0).insertNode(newNode)
        } else {
          // 没有直接贴贴
          document.selection.createRange().pasteHTML(text)
        }
        // 需要手动调用 oninput 输入事件
      }
    }

    // 方式三：方式一的升级版，保留原格式，但是会进行文本排版优化，去除多余的空格换行符
    function handlePaste3 (e) {
      // 内容
      var text = ''
      // 贴贴数据
      var clp = (e.originalEvent || e).clipboardData
      // 贴贴内容
      if (clp && clp.getData) {
        text = clp.getData('text/plain') || ''
      } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData('text') || ''
      }
      // 内容不为空
      if (text !== '') {
        // 替换内容中间的全角空格为普通空格
        text = text.replaceAll(/　+/, ' ')
        // 移除开头回车空格
        text = text.replaceAll(/^\s+/, '')
        // 将内容中间换行空格替换成换行
        text = text.replaceAll(/\n\s+/, '\n')
        // 替换内容中间多余的空格
        text = text.replaceAll(/ +/, ' ')
        // 数据是否满足指定格式
        if (clp === undefined || clp === null) {
          // 是否有光标位置
          if (window.getSelection) {
            // 有则插入指定位置
            var newNode = document.createElement('span')
            newNode.innerHTML = text
            window.getSelection().getRangeAt(0).insertNode(newNode)
          } else {
            // 没有则直接贴贴
            document.selection.createRange().pasteHTML(text)
          }
          // 需要手动调用 oninput 输入事件
        } else {
          // 插入内容，会自动调用 oninput 输入事件
          document.execCommand('insertText', false, text)
        }
      }
    }
  </script>
</body>
</html>