获取选定区域的html

最新推荐文章于 2025-03-13 16:09:42 发布

sgzwiz

最新推荐文章于 2025-03-13 16:09:42 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： function browser html webkit chrome div

本文链接：https://blog.youkuaiyun.com/sgzwiz/article/details/7893774

本文介绍了一种处理网页粘贴事件的方法，通过不同浏览器特性的对比，展示了如何在Chrome和IE等浏览器中完整地获取粘贴内容的HTML标签属性。文中提供了一个具体的JavaScript实现示例，该方法能够兼容多种浏览器。

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

用range的innerHTML取得的html中tag属性不全，要想取得tag的完整属性，参照下面代码

<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste here</div>

function handlepaste (elem, e) {
    var savedcontent = elem.innerHTML;
    if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
        if (/text\/html/.test(e.clipboardData.types)) {
            elem.innerHTML = e.clipboardData.getData('text/html');
        }
        else if (/text\/plain/.test(e.clipboardData.types)) {
            elem.innerHTML = e.clipboardData.getData('text/plain');
        }
        else {
            elem.innerHTML = "";
        }
        waitforpastedata(elem, savedcontent);
        if (e.preventDefault) {
                e.stopPropagation();
                e.preventDefault();
        }
        return false;
    }
    else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
        elem.innerHTML = "";
        waitforpastedata(elem, savedcontent);
        return true;
    }
}

function waitforpastedata (elem, savedcontent) {
    if (elem.childNodes && elem.childNodes.length > 0) {
        processpaste(elem, savedcontent);
    }
    else {
        that = {
            e: elem,
            s: savedcontent
        }
        that.callself = function () {
            waitforpastedata(that.e, that.s)
        }
        setTimeout(that.callself,20);
    }
}

function processpaste (elem, savedcontent) {
    pasteddata = elem.innerHTML;
    //^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here

    elem.innerHTML = savedcontent;

    // Do whatever with gathered data;
    alert(pasteddata);
}

chrome可以从e.clipboardData.getData('text/html')中获取，而IE只能等waitforpastedata()回调两次才能在elem.innerHTML中获取相关数据。
http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser