正如問題中所述，我如何獲取粘貼在文檔上的內容。截至目前，我正在創建一個文本區域和dblclick，以便將焦點置於textarea中，然後粘貼事件textarea我正在收集數據。我不認爲這是一個好方法。我的代碼是低於在粘貼事件上獲取粘貼文檔的內容
$('body').dblclick(function()
{
$('#textare').focus();
});
Then
$('#textare').keyup(function()
{
alert($(this).val());
});
請給我一個替代的過程。
我正在尋找替代像
$(document).paste(function()
{
// Get the pasted content
});
我使用谷歌Chrome瀏覽器。我不想用textarea來捕捉文本。
可以onpaste事件添加到您的元素。它是由所有的browers
onpaste="return getPastedValue(this);"
<script type="text/javascript">
function getPastedValue (obj) {
alert(obj.innerHTML);
return false;
}
</script>
事情是這樣的：
$("yourTextAres").bind('paste', function() {
alert($(this).val());
});
我沒有downvote，但這不會告訴你粘貼什麼，它只會告訴你該領域的當前價值 - 粘貼並不一定會取代現場已經存在的任何東西。 （假設你的瀏覽器甚至支持「粘貼」事件，這不是所有的事情。） – nnnnnn 2011-12-14 06:43:12
該解決方案超越了僅獲取文本一步的支持，它實際上可以讓你編輯粘貼的內容纔得到粘貼到的元素。
它的工作原理是採用EN突變觀察家CONTENTEDITABLE，onpaste事件（所有主要的瀏覽器都支持）
第1步
創建CONTENTEDITABLE一個HTML元素（由Chrome，Firefox和IE11 +支持）
<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();
}
}
}
什麼代碼所做的：
非常感謝Tim Down
http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser這個問題/回答可以幫助你？ – BumbleShrimp 2011-12-14 06:41:19
@JonathonG看來我在接受的答案中使用相同的方法並尋找替代方案。 – Exception 2011-12-14 06:47:57