JavaScript获取剪贴板数据粘贴事件(跨浏览器)

web应用程序如何检测粘贴事件并检索要粘贴的数据?

我想在文本粘贴到富文本编辑器之前删除HTML内容。

在粘贴后清理文本是有效的，但问题是所有以前的格式都会丢失。例如，我可以在编辑器中编写一个句子并将其加粗，但当我粘贴新文本时，所有格式都会丢失。我只想清除粘贴的文本，并保留以前的任何格式不变。

理想情况下，解决方案应该可以跨所有现代浏览器(例如，MSIE、Gecko、Chrome和Safari)工作。

注意，MSIE有clipboardData.getData()，但我找不到其他浏览器的类似功能。

当前回答

这应该适用于所有支持onpaste事件和突变观察者的浏览器。

这个解决方案不仅仅只是获取文本，它实际上允许您在粘贴到元素之前编辑粘贴的内容。

它通过使用contentteditable, onpaste事件(所有主要浏览器支持)在突变观察者(Chrome, Firefox和IE11+支持)中工作。

步骤1

创建一个带有contentteditable的html元素

<div contenteditable="true" id="target_paste_element"></div>

步骤2

在Javascript代码中添加以下事件

document.getElementById("target_paste_element").addEventListener("paste", pasteEventVerifierEditor.bind(window, pasteCallBack), false);

我们需要绑定pasteCallBack，因为突变观察者将被异步调用。

步骤3

向代码中添加以下函数

function pasteEventVerifierEditor(callback, e)
{
   //is fired on a paste event. 
    //pastes content into another contenteditable div, mutation observer observes this, content get pasted, dom tree is copied and can be referenced through call back.
    //create temp div
    //save the caret position.
    savedCaret = saveSelection(document.getElementById("target_paste_element"));

    var tempDiv = document.createElement("div");
    tempDiv.id = "id_tempDiv_paste_editor";
    //tempDiv.style.display = "none";
    document.body.appendChild(tempDiv);
    tempDiv.contentEditable = "true";

    tempDiv.focus();

    //we have to wait for the change to occur.
    //attach a mutation observer
    if (window['MutationObserver'])
    {
        //this is new functionality
        //observer is present in firefox/chrome and IE11
        // select the target node
        // create an observer instance
        tempDiv.observer = new MutationObserver(pasteMutationObserver.bind(window, callback));
        // configuration of the observer:
        var config = { attributes: false, childList: true, characterData: true, subtree: true };

        // pass in the target node, as well as the observer options
        tempDiv.observer.observe(tempDiv, config);

    }   

}



function pasteMutationObserver(callback)
{

    document.getElementById("id_tempDiv_paste_editor").observer.disconnect();
    delete document.getElementById("id_tempDiv_paste_editor").observer;

    if (callback)
    {
        //return the copied dom tree to the supplied callback.
        //copy to avoid closures.
        callback.apply(document.getElementById("id_tempDiv_paste_editor").cloneNode(true));
    }
    document.body.removeChild(document.getElementById("id_tempDiv_paste_editor"));

}

function pasteCallBack()
{
    //paste the content into the element.
    restoreSelection(document.getElementById("target_paste_element"), savedCaret);
    delete savedCaret;

    pasteHtmlAtCaret(this.innerHTML, false, true);
}   


saveSelection = function(containerEl) {
if (containerEl == document.activeElement)
{
    var range = window.getSelection().getRangeAt(0);
    var preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(containerEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    var start = preSelectionRange.toString().length;

    return {
        start: start,
        end: start + range.toString().length
    };
}
};

restoreSelection = function(containerEl, savedSel) {
    containerEl.focus();
    var charIndex = 0, range = document.createRange();
    range.setStart(containerEl, 0);
    range.collapse(true);
    var nodeStack = [containerEl], node, foundStart = false, stop = false;

    while (!stop && (node = nodeStack.pop())) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        } else {
            var i = node.childNodes.length;
            while (i--) {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

function pasteHtmlAtCaret(html, returnInNode, selectPastedContent) {
//function written by Tim Down

var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // only relatively recently standardized and is not supported in
        // some browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        var firstNode = frag.firstChild;
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            if (returnInNode)
            {
                range.setStart(lastNode, 0); //this part is edited, set caret inside pasted node.
            }
            else
            {
                range.setStartAfter(lastNode); 
            }
            if (selectPastedContent) {
                range.setStartBefore(firstNode);
            } else {
                range.collapse(true);
            }
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if ( (sel = document.selection) && sel.type != "Control") {
    // IE < 9
    var originalRange = sel.createRange();
    originalRange.collapse(true);
    sel.createRange().pasteHTML(html);
    if (selectPastedContent) {
        range = sel.createRange();
        range.setEndPoint("StartToStart", originalRange);
        range.select();
    }
}
}

代码的作用:

Somebody fires the paste event by using ctrl-v, contextmenu or other means In the paste event a new element with contenteditable is created (an element with contenteditable has elevated privileges) The caret position of the target element is saved. The focus is set to the new element The content gets pasted into the new element and is rendered in the DOM. The mutation observer catches this (it registers all changes to the dom tree and content). Then fires the mutation event. The dom of the pasted content gets cloned into a variable and returned to the callback. The temporary element is destroyed. The callback receives the cloned DOM. The caret is restored. You can edit this before you append it to your target. element. In this example I'm using Tim Downs functions for saving/restoring the caret and pasting HTML into the element.

例子

非常感谢Tim Down 请看这篇文章的答案:

在粘贴事件上获取文档上的粘贴内容

2014-12-16 14:52:46

其他回答

$('#dom').on('paste',function (e){
    setTimeout(function(){
        console.log(e.currentTarget.value);
    },0);
});

2014-03-19 09:26:28

首先想到的是谷歌的闭包库的pastehandler http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html

2010-02-01 13:24:19

解决方案，为我是添加事件监听器粘贴事件，如果你是粘贴到一个文本输入。由于粘贴事件发生在输入中的文本更改之前，在我的on粘贴处理程序中，我创建了一个延迟函数，其中我检查输入框中发生的粘贴更改:

onPaste: function() {
    var oThis = this;
    setTimeout(function() { // Defer until onPaste() is done
        console.log('paste', oThis.input.value);
        // Manipulate pasted input
    }, 1);
}

2014-01-13 06:24:09

这是上面发布的一个现有代码，但我已经为IE更新了它，错误是当现有的文本被选择和粘贴时，不会删除所选的内容。下面的代码已经修复了这个问题

selRange.deleteContents();

参见下面的完整代码

$('[contenteditable]').on('paste', function (e) {
    e.preventDefault();

    if (window.clipboardData) {
        content = window.clipboardData.getData('Text');        
        if (window.getSelection) {
            var selObj = window.getSelection();
            var selRange = selObj.getRangeAt(0);
            selRange.deleteContents();                
            selRange.insertNode(document.createTextNode(content));
        }
    } else if (e.originalEvent.clipboardData) {
        content = (e.originalEvent || e).clipboardData.getData('text/plain');
        document.execCommand('insertText', false, content);
    }        
});

2017-09-14 16:06:57

为了在IE11和Chrome上都支持纯文本的复制和粘贴，我使用了以下函数。

它有两个if语句来区分IE和chome，并执行适当的代码。在第一部分中，代码从剪贴板中读取文本，在第二部分中，它将文本粘贴到光标位置，替换当前所选文本。

特别是，对于IE上的粘贴，代码获取选择范围，删除所选文本，将文本从剪贴板插入到一个新的html文本节点中，重新配置范围以在光标位置加上文本长度处插入文本节点。

代码如下:

editable.addEventListener("paste", function(e) {
    e.preventDefault();

    // Get text from the clipboard.
    var text = '';
    if (e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData)) {
      text = (e.originalEvent || e).clipboardData.getData('text/plain');
    } else if (window.clipboardData) {
      text = window.clipboardData.getData('Text');
    }
    
    // bool to indicate if the user agent is internet explorer
    let isIE = /Trident/.test(navigator.userAgent);
    
    if (document.queryCommandSupported('insertText') && !isIE) {
        // Chrome etc.
        document.execCommand('insertText', false, text);
        
    } else {
        // IE.
        
        // delete content from selection.
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);
        document.execCommand("delete");

        // paste plain text in a new node.
        var newNode = document.createTextNode(text);

        range.insertNode(newNode);
        range.setStart(newNode, 0)
        range.setEnd(newNode, newNode.childNodes.length);

        sel.removeAllRanges;
        sel.addRange(range);
    }

}, false);

特别是为了在IE上粘贴许多答案的文本，我找到了这个说明文档。execCommand('paste'， false, text);这在IE11上不起作用，因为浏览器会一次又一次地调用粘贴事件。我用range对象上的函数替换了它。

另一个问题是，在IE11上，根据版本，函数文档。execCommand('insertText'， false, text);有时可用，有时不可用，所以我显式检查浏览器是否是IE，并为它执行基于范围选择的部分代码(参见其他)。

2022-01-20 10:54:03

JavaScript获取剪贴板数据粘贴事件(跨浏览器)

推荐文章

最新文章

标签