js 将复制面板的粘贴内容，样式标签去除（类似web微信输入框div）

最新推荐文章于 2024-09-06 21:16:04 发布

原创最新推荐文章于 2024-09-06 21:16:04 发布 · 5.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #标准 #html5

js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种在前端开发中去除粘贴内容的HTML标签和样式的方法，通过监听paste事件并处理粘贴文本，实现纯文本输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为最近在做一个输入框支持表情文字所以输入框只能使用div了但是复制回来的内容会带样式html标签这显然很不合理，详细如下：

以复制Bootstrap内容为实例，复制内容如下：

粘贴处理后如下图所示：

完全的将复制来的css样式，Html标签去除并且会把内容处理成有规律的格式如下图：

如果感觉上面的叙述完全符合您的标准那么就废话不多说直接上代码吧！

$(".page3-emjoy5").on("paste", function (e) {
    textInit(e)
});

function textInit(e) {
    e.preventDefault();
    var text;
    var clp = (e.originalEvent || e).clipboardData;
    if (clp === undefined || clp === null) {
        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);
            }
        }
    } else {
        text = clp.getData('text/plain') || "";
        if (text !== "") {
            document.execCommand('insertText', false, text);
        }
    }
}