Js代码，如何控制可编辑<div contentEditable>粘贴文本时，只粘贴纯文本，不带格式

HTML5中，<div></div>元素添加了一个新的属性 contentEditable ，通过添加contentEditable，前端开发者可以将<div contentEditable></div>元素转化为像文本输入框<input/>或者文本输入域<textarea></textarea>一样的表单元素，并且还可以保持<div></div>元素原本的样式多样性，甚至可以达到与展示时一样的预览效果。

不过，<div contentEditable></div>元素还存在着一个让前端开发工程师头大的问题，那就是在粘贴别出复制过来的文本是，它将会在粘贴按键按下的时候，还保持原有的文本格式，只有在松开粘贴按键后，粘贴文本才会受到<div contentEditable></div>元素的CSS样式约束，统一样式。

这个问题虽然影响不大，但是给网站用户的体验却是非常的糟糕。

其实，这个问题解决起来也并不难，只要为相关元素添加一个粘贴paste动作监听，在监听动作中清除粘贴板上的文本格式，即可达到只粘贴纯文本，而不带格式的目的。

HTML代码

<div id="div-edit" contentEditable></div>

JS代码

    //为元素添加paste监听动作

    document.getElementById('div-edit').addEventListener('paste', function (e) {

        onPaste(e)

    })



    //格式化粘贴文本方法

    function onPaste(event) {

        var e = event || window.event
        // 阻止默认粘贴

        e.preventDefault();
        // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问

        // clipboardData的getData(fomat) 从剪贴板获取指定格式的数据

        var text =  (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');

        //清除回车

        text = text.replace(/\[\d+\]|\n|\r/ig,"")
        // 插入

        document.execCommand("insertText", false, text);

    }

HTML & JS代码实验如下

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>HTML <div contentEditable>粘贴问题解决</title>

    <style type="text/css">

        #div-edit{

            font-size: 15px;

            width: 720px;

            height: 400px;

            line-height: 25px;

            font-weight: 800;

            margin: 50px 100px;

            padding: 20px;

            border: 1px solid #333; 

            border-radius: 3px;

        }

    </style>

</head>

<body>

    <div id="div-edit" contentEditable></div>

</body>



<script type="text/javascript">

    //为元素添加paste监听动作

    document.getElementById('div-edit').addEventListener('paste', function (e) {

        onPaste(e)

    })



    //格式化粘贴文本方法

    function onPaste(event) {



        var e = event || window.event



        // 阻止默认粘贴

        e.preventDefault();



        // 粘贴事件有一个clipboardData的属性，提供了对剪贴板的访问

        // clipboardData的getData(fomat) 从剪贴板获取指定格式的数据

        var text =  (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');



        //清除回车

        text = text.replace(/\[\d+\]|\n|\r/ig,"")



        // 插入

        document.execCommand("insertText", false, text);

    }

</script>

以上代码，可复制到新建的.html文件中自行实验

Js代码，如何控制可编辑<div contentEditable>粘贴文本时，只粘贴纯文本，不带格式

Js代码，HTML5 <div contentEditable>元素可通过addEventListener()方法监听粘贴paste动作，清除粘贴板上的文本格式，从而达到只粘贴纯文本，而不带格式的目的。