blocks|key|1342727|text|首先想到的是谷歌闭包lib+http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html的粘贴式处理程序|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1342728|entityMap|0|LINK|mutability|MUTABLE|url|http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html^0|E|2C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>First that comes to mind is the pastehandler of google's closure lib
<a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html" rel="nofollow noreferrer">http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html</a></p>


blocks|key|1342733|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1342734|function+onPasteMe(currentData,+maxLen)+{
++++//+validate+max+length+of+pasted+text
++++var+totalCharacterCount+=+window.clipboardData.getData('Text').length;
}

<input+type="text"+onPaste="return+onPasteMe(this,+50);"+/>|code-block|syntax|javascript|1342735|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me :</p>

<pre><code>function onPasteMe(currentData, maxLen) {
    // validate max length of pasted text
    var totalCharacterCount = window.clipboardData.getData('Text').length;
}

&lt;input type="text" onPaste="return onPasteMe(this, 50);" /&gt;
</code></pre>


blocks|key|1127637|text|我在这里用屏幕外的文本区域为蒂姆·唐斯的提案写了一个小的概念证明。下面是代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1127638|<html>
<head>
<script+type="text/javascript"+src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>+
<script+language="JavaScript">
+$(document).ready(function()
{

var+ctrlDown+=+false;
var+ctrlKey+=+17,+vKey+=+86,+cKey+=+67;

$(document).keydown(function(e)
{
++++if+(e.keyCode+==+ctrlKey)+ctrlDown+=+true;
}).keyup(function(e)
{
++++if+(e.keyCode+==+ctrlKey)+ctrlDown+=+false;
});

$(".capture-paste").keydown(function(e)
{
++++if+(ctrlDown+&&+(e.keyCode+==+vKey+%7C%7C+e.keyCode+==+cKey)){
++++++++$("#area").css("display","block");
++++++++$("#area").focus();+++++++++
++++}
});

$(".capture-paste").keyup(function(e)
{
++++if+(ctrlDown+&&+(e.keyCode+==+vKey+%7C%7C+e.keyCode+==+cKey)){++++++++++++++++++++++
++++++++$("#area").blur();
++++++++//do+your+sanitation+check+or+whatever+stuff+here
++++++++$("#paste-output").text($("#area").val());
++++++++$("#area").val("");
++++++++$("#area").css("display","none");
++++}
});

});
</script>

</head>
<body+class="capture-paste">

<div+id="paste-output"></div>


++++<div>
++++<textarea+id="area"+style="display:+none;+position:+absolute;+left:+-99em;"></textarea>
++++</div>

</body>
</html>|code-block|syntax|javascript|1127639|只需将整个代码复制并粘贴到一个html文件中，然后尝试(使用ctrl-v)将剪贴板中的文本粘贴到文档的任何位置。|1127640|我已经在IE9和新版本的火狐、Chrome和Opera上进行了测试。工作得很好。此外，一个人可以使用任何他喜欢的组合键来触发这个功能，这也是很好的。当然，不要忘记包括jQuery源代码。|1127641|请随意使用此代码，如果您带来了一些改进或问题，请将它们发布回来。还要注意的是，我不是Javascript开发人员，所以我可能遗漏了一些东西(=>do您自己的研究)。|1127642|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I've written a little proof of concept for Tim Downs proposal here with off-screen textarea. And here goes the code:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt; 
&lt;script language="JavaScript"&gt;
 $(document).ready(function()
{

var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;

$(document).keydown(function(e)
{
    if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e)
{
    if (e.keyCode == ctrlKey) ctrlDown = false;
});

$(".capture-paste").keydown(function(e)
{
    if (ctrlDown &amp;&amp; (e.keyCode == vKey || e.keyCode == cKey)){
        $("#area").css("display","block");
        $("#area").focus();         
    }
});

$(".capture-paste").keyup(function(e)
{
    if (ctrlDown &amp;&amp; (e.keyCode == vKey || e.keyCode == cKey)){                      
        $("#area").blur();
        //do your sanitation check or whatever stuff here
        $("#paste-output").text($("#area").val());
        $("#area").val("");
        $("#area").css("display","none");
    }
});

});
&lt;/script&gt;

&lt;/head&gt;
&lt;body class="capture-paste"&gt;

&lt;div id="paste-output"&gt;&lt;/div&gt;


    &lt;div&gt;
    &lt;textarea id="area" style="display: none; position: absolute; left: -99em;"&gt;&lt;/textarea&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Just copy and paste the whole code into one html file and try to paste (using ctrl-v) text from clipboard anywhere on the document. </p>

<p>I've tested it in IE9 and new versions of Firefox, Chrome and Opera. Works quite well. Also it's good that one can use whatever key combination he prefers to triger this functionality. Of course don't forget to include jQuery sources.</p>

<p>Feel free to use this code and if you come with some improvements or problems please post them back. Also note that I'm no Javascript developer so I may have missed something (=>do your own testign).</p>


blocks|key|1342842|text|这个函数没有使用任何setTimeout()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1342843|我使用了this优秀的文章来实现跨浏览器的支持。|offset|length|1342844|$(document).on("focus",+"input[type=text],textarea",+function+(e)+{
++++var+t+=+e.target;
++++if+(!$(t).data("EventListenerSet"))+{
++++++++//get+length+of+field+before+paste
++++++++var+keyup+=+function+()+{
++++++++++++$(this).data("lastLength",+$(this).val().length);
++++++++};
++++++++$(t).data("lastLength",+$(t).val().length);
++++++++//catch+paste+event
++++++++var+paste+=+function+()+{
++++++++++++$(this).data("paste",+1);//Opera+11.11%2B
++++++++};
++++++++//process+modified+data,+if+paste+occured
++++++++var+func+=+function+()+{
++++++++++++if+($(this).data("paste"))+{
++++++++++++++++alert(this.value.substr($(this).data("lastLength")));
++++++++++++++++$(this).data("paste",+0);
++++++++++++++++this.value+=+this.value.substr(0,+$(this).data("lastLength"));
++++++++++++++++$(t).data("lastLength",+$(t).val().length);
++++++++++++}
++++++++};
++++++++if+(window.addEventListener)+{
++++++++++++t.addEventListener('keyup',+keyup,+false);
++++++++++++t.addEventListener('paste',+paste,+false);
++++++++++++t.addEventListener('input',+func,+false);
++++++++}
++++++++else+{//IE
++++++++++++t.attachEvent('onkeyup',+function+()+{
++++++++++++++++keyup.call(t);
++++++++++++});
++++++++++++t.attachEvent('onpaste',+function+()+{
++++++++++++++++paste.call(t);
++++++++++++});
++++++++++++t.attachEvent('onpropertychange',+function+()+{
++++++++++++++++func.call(t);
++++++++++++});
++++++++}
++++++++$(t).data("EventListenerSet",+1);
++++}
});+|code-block|syntax|javascript|1342845|这段代码在粘贴之前扩展了选择句柄：demo|1342846|entityMap|0|LINK|mutability|MUTABLE|url|http://www.greywyvern.com/?post=282|1|http://jsbin.com/igaxax/14^0|0|4|4|0|0|0|H|4|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>This one does not use any setTimeout().</p>

<p>I have used <a href="http://www.greywyvern.com/?post=282" rel="nofollow noreferrer">this</a> great article to achieve cross browser support.</p>

<pre><code>$(document).on("focus", "input[type=text],textarea", function (e) {
    var t = e.target;
    if (!$(t).data("EventListenerSet")) {
        //get length of field before paste
        var keyup = function () {
            $(this).data("lastLength", $(this).val().length);
        };
        $(t).data("lastLength", $(t).val().length);
        //catch paste event
        var paste = function () {
            $(this).data("paste", 1);//Opera 11.11+
        };
        //process modified data, if paste occured
        var func = function () {
            if ($(this).data("paste")) {
                alert(this.value.substr($(this).data("lastLength")));
                $(this).data("paste", 0);
                this.value = this.value.substr(0, $(this).data("lastLength"));
                $(t).data("lastLength", $(t).val().length);
            }
        };
        if (window.addEventListener) {
            t.addEventListener('keyup', keyup, false);
            t.addEventListener('paste', paste, false);
            t.addEventListener('input', func, false);
        }
        else {//IE
            t.attachEvent('onkeyup', function () {
                keyup.call(t);
            });
            t.attachEvent('onpaste', function () {
                paste.call(t);
            });
            t.attachEvent('onpropertychange', function () {
                func.call(t);
            });
        }
        $(t).data("EventListenerSet", 1);
    }
}); 
</code></pre>

<p>This code is extended with selection handle before paste:
<a href="http://jsbin.com/igaxax/14" rel="nofollow noreferrer">demo</a></p>


blocks|key|1342928|text|适合我的解决方案是在粘贴到文本输入时添加事件侦听器来粘贴事件。由于paste事件在输入文本更改之前发生，因此在我的on+paste处理程序中，我创建了一个延迟函数，在该函数中，我检查在粘贴时输入框中发生的更改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1342929|onPaste:+function()+{
++++var+oThis+=+this;
++++setTimeout(function()+{+//+Defer+until+onPaste()+is+done
++++++++console.log('paste',+oThis.input.value);
++++++++//+Manipulate+pasted+input
++++},+1);
}|code-block|syntax|javascript|1342930|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Solution that works for me is adding event listener to paste event if you are pasting to a text input.
Since paste event happens before text in input changes, inside my on paste handler I create a deferred function inside which I check for changes in my input box that happened on paste:</p>

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


blocks|key|1127757|text|$('#dom').on('paste',function+(e){
++++setTimeout(function(){
++++++++console.log(e.currentTarget.value);
++++},0);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1127758|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|1343000|text|这个解决方案是替换html标签，它简单且跨浏览器；检查这个jsfiddle：http://jsfiddle.net/tomwan/cbp1u2cx/1/，核心代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1343001|var+$plainText+=+$("#plainText");
var+$linkOnly+=+$("#linkOnly");
var+$html+=+$("#html");

$plainText.on('paste',+function+(e)+{
++++window.setTimeout(function+()+{
++++++++$plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
++++},+0);
});

$linkOnly.on('paste',+function+(e)+{
++++window.setTimeout(function+()+{
++++++++$linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
++++},+0);
});

function+replaceStyleAttr+(str)+{
++++return+str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g,+function+(a,+b,+c,+d)+{
++++++++return+b+%2B+'style_replace'+%2B+d;
++++});
}

function+removeTagsExcludeA+(str)+{
++++return+str.replace(/<\/?((?!a)(\w%2B))\s*[\w\W]*?>/g,+'');
}

function+removeAllTags+(str)+{
++++return+str.replace(/<\/?(\w%2B)\s*[\w\W]*?>/g,+'');
}|code-block|syntax|javascript|1343002|注意:你应该在后台做一些关于xss+filter的工作，因为这个解决方案不能过滤像'<<>>‘这样的字符串。|1343003|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tomwan/cbp1u2cx/1/^0|12|12|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>This solution is replace the html tag, it's simple and cross-browser; check this jsfiddle: <a href="http://jsfiddle.net/tomwan/cbp1u2cx/1/" rel="nofollow">http://jsfiddle.net/tomwan/cbp1u2cx/1/</a>, core code:</p>

<pre><code>var $plainText = $("#plainText");
var $linkOnly = $("#linkOnly");
var $html = $("#html");

$plainText.on('paste', function (e) {
    window.setTimeout(function () {
        $plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
    }, 0);
});

$linkOnly.on('paste', function (e) {
    window.setTimeout(function () {
        $linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
    }, 0);
});

function replaceStyleAttr (str) {
    return str.replace(/(&lt;[\w\W]*?)(style)([\w\W]*?&gt;)/g, function (a, b, c, d) {
        return b + 'style_replace' + d;
    });
}

function removeTagsExcludeA (str) {
    return str.replace(/&lt;\/?((?!a)(\w+))\s*[\w\W]*?&gt;/g, '');
}

function removeAllTags (str) {
    return str.replace(/&lt;\/?(\w+)\s*[\w\W]*?&gt;/g, '');
}
</code></pre>

<p>notice: you should do some work about xss filter on the back side because this solution cannot filter strings like '&lt;&lt;>>'</p>


blocks|key|1127858|text|function+myFunct(+e+){
++++e.preventDefault();

++++var+pastedText+=+undefined;
++++if(+window.clipboardData+&&+window.clipboardData.getData+){
++++pastedText+=+window.clipboardData.getData('Text');
}+
else+if(+e.clipboardData+&&+e.clipboardData.getData+){
++++pastedText+=+e.clipboardData.getData('text/plain');
}

//work+with+text

}
document.onpaste+=+myFunct;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1127859|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function myFunct( e ){
    e.preventDefault();

    var pastedText = undefined;
    if( window.clipboardData &amp;&amp; window.clipboardData.getData ){
    pastedText = window.clipboardData.getData('Text');
} 
else if( e.clipboardData &amp;&amp; e.clipboardData.getData ){
    pastedText = e.clipboardData.getData('text/plain');
}

//work with text

}
document.onpaste = myFunct;
</code></pre>


blocks|key|1343066|text|这是一个发布在上面的现有代码，但我已经为IE更新了它，错误是当现有文本被选择时，粘贴不会删除所选内容。下面的代码已经修复了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1343067|selRange.deleteContents();+|code-block|syntax|javascript|1343068|请参阅下面的完整代码|1343069|$('[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+%7C%7C+e).clipboardData.getData('text/plain');
++++++++document.execCommand('insertText',+false,+content);
++++}++++++++
});|1343070|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is an existing code posted above but I have updated it for IE's, the bug was when the existing text is selected and pasted will not delete the selected content. This has been fixed by the below code</p>

<pre><code>selRange.deleteContents(); 
</code></pre>

<p>See complete code below</p>

<pre><code>$('[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);
    }        
});
</code></pre>


blocks|key|1127947|text|简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1127948|document.onpaste+=+function(e)+{
++++var+pasted+=+e.clipboardData.getData('Text');
++++console.log(pasted)
}|code-block|syntax|javascript|1127949|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simple solution:</p>

<pre><code>document.onpaste = function(e) {
    var pasted = e.clipboardData.getData('Text');
    console.log(pasted)
}
</code></pre>


blocks|key|1343139|text|当用户通过浏览器的用户界面启动“粘贴”操作时，将触发paste事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1343140|HTML|1343141|<div+class="source"+contenteditable="true">Try+copying+text+from+this+box...</div>
<div+class="target"+contenteditable="true">...and+pasting+it+into+this+one</div>|code-block|syntax|javascript|1343142|JavaScript|1343143|const+target+=+document.querySelector('div.target');

target.addEventListener('paste',+(event)+=>+{
++++let+paste+=+(event.clipboardData+%7C%7C+window.clipboardData).getData('text');
++++paste+=+paste.toUpperCase();

++++const+selection+=+window.getSelection();
++++if+(!selection.rangeCount)+return+false;
++++selection.deleteFromDocument();
++++selection.getRangeAt(0).insertNode(document.createTextNode(paste));

++++event.preventDefault();
});|1343144|Know+more|offset|length|1343145|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event^0|0|0|0|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>The paste event is fired when the user has initiated a &quot;paste&quot; action through the browser's user interface.</p>
<p>HTML</p>
<pre><code>&lt;div class=&quot;source&quot; contenteditable=&quot;true&quot;&gt;Try copying text from this box...&lt;/div&gt;
&lt;div class=&quot;target&quot; contenteditable=&quot;true&quot;&gt;...and pasting it into this one&lt;/div&gt;
</code></pre>
<p>JavaScript</p>
<pre><code>const target = document.querySelector('div.target');

target.addEventListener('paste', (event) =&gt; {
    let paste = (event.clipboardData || window.clipboardData).getData('text');
    paste = paste.toUpperCase();

    const selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();
    selection.getRangeAt(0).insertNode(document.createTextNode(paste));

    event.preventDefault();
});
</code></pre>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event" rel="nofollow noreferrer">Know more</a></p>


blocks|key|1343232|text|为了支持在IE11和Chrome上复制和粘贴纯文本，我使用了以下函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1343233|它有两个if语句来区分IE和chome，并执行相应的代码。在第一部分中，代码从剪贴板读取文本，在第二部分中，它将文本粘贴到光标位置，如果存在，则替换所选文本。|1343234|特别是，对于粘贴到IE上，代码获取选择范围，删除所选文本，将剪贴板中的文本插入到新的html文本节点中，重新配置范围以在光标位置插入文本节点加上文本长度。|1343235|代码如下：|1343236|editable.addEventListener("paste",+function(e)+{
++++e.preventDefault();

++++//+Get+text+from+the+clipboard.
++++var+text+=+'';
++++if+(e.clipboardData+%7C%7C+(e.originalEvent+&&+e.originalEvent.clipboardData))+{
++++++text+=+(e.originalEvent+%7C%7C+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);|code-block|syntax|javascript|1343237|特别是，为了在IE上粘贴许多答案，我发现这个指令document.execCommand('paste',+false,+text);在IE11上不起作用，因为浏览器一次又一次地调用paste事件。所以我把它替换为range对象上的函数。|offset|length|style|CODE|1343238|另一个问题是，在IE11上，根据版本的不同，函数document.execCommand('insertText',+false,+text);有时是不可用的，所以我显式地检查了浏览器是否为IE，并针对它执行了基于范围选择的部分代码(参见else)。|1343239|entityMap^0|0|0|0|0|0|O|17|0|O|1C|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@$O|12|P|13|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@$O|15|P|16|Q|R]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

<p>In order to support the copy and paste of plain text both on IE11 and Chrome I used the following function.</p>
<p>It has two if statements distinguishing IE from chome and executing the approriate code. In the first part the code reads the text from the clipboard, in the second part it pastes the text right in the cursor position replacing the selected text if present.</p>
<p>In particular, for the paste on IE the code gets the selection range, deletes the selected text, inserts the text from the clipboard in a new html text node, reconfigure the range to insert the text node at the cursor position plus the text length.</p>
<p>The code is the following:</p>
<pre><code>editable.addEventListener(&quot;paste&quot;, function(e) {
    e.preventDefault();

    // Get text from the clipboard.
    var text = '';
    if (e.clipboardData || (e.originalEvent &amp;&amp; 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') &amp;&amp; !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(&quot;delete&quot;);

        // 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);
</code></pre>
<p>In particular, in order to paste text on IE many answers I found this instruction <code>document.execCommand('paste', false, text);</code> that doesn't work on IE11 because the browser calls the paste event again and again many times. So I replaced it with the functions on the range object.</p>
<p>Another issue is that on IE11, depending on the version, the function <code>document.execCommand('insertText', false, text);</code> sometimes is available other times not, so I checked explicitly whether the browser is IE and for it executed the part of the code based on the range selection (see else).</p>


<p>How can a web application detect a paste event and retrieve the data to be pasted?</p>

<p>I would like to remove HTML content before the text is pasted into a rich text editor.</p>

<p>Cleaning the text after being pasted afterwards works, but the problem is that all previous formatting is lost. For example, I can write a sentence in the editor and make it bold, but when I paste new text, all formatting is lost. I want to clean just the text that is pasted, and leave any previous formatting untouched.</p>

<p>Ideally, the solution should work across all modern browsers (e.g., MSIE, Gecko, Chrome, and Safari).</p>

<p>Note that MSIE has <code>clipboardData.getData()</code>, but I could not find similar functionality for other browsers.</p>


JavaScript get clipboard data on paste event (Cross browser)

jQuery

web应用程序如何检测粘贴事件并检索要粘贴的数据？我希望在将文本粘贴到富文本编辑器之前删除HTML内容。在粘贴后清除文本是可行的，但问题是所有以前的格式都会丢失。例如，我可以在编辑器中编写一个句子并将其加粗，但是当我粘贴新文本时，所有格式都会丢失。我只想清理粘贴的文本，并保留以前的任何格式不变。理想情况下，该解决方案应...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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