网上搜寻了很多,在IE中可以使用window.clipboardData对象来设置和获取剪贴板内容,目前没有标准的统一的访问接口。
看了网上说使用Zero Clipboard插件来实现,但是没有获取的具体示例代码,只有设置的示例代码。也不知道使用Zero Clipboard到底是否可以获取剪贴板内容。
具体使用JS该如何获取剪贴板内容呢?有没有使用Zero Clipboard来获取剪贴板内容的示例代码呢?
如果是ie浏览器,并且用户允许剪贴板交互,可以用 window.clipboardData.getData("Text");
别的浏览器,可以借助键盘模拟ctrl+v到表单,然后读取,获得内容。
剪切板的值在粘贴之后可以获取,对象绑定粘贴事件:
$("#id").on('paste', function(e) {
var pastedText = undefined;
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else {
pastedText = e.originalEvent.clipboardData.getData('Text');//e.clipboardData.getData('text/plain');
}
alert(pastedText);
});
这样应该可以 我在IE, Edge, Chrome 上测试了没问题 希望对你有帮助
HTML
<div id='div' contenteditable='true'>Paste</div>
JS
var editableDiv = document.getElementById('editableDiv');
function handlepaste (e) {
var types, pastedData, savedContent;
// Browsers that support the 'text/html' type in the Clipboard API (Chrome, Firefox 22+)
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {
// Check for 'text/html' in types list. See abligh's answer below for deatils on
// why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
// Safari/Edge don't advertise HTML data even if it is available
types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {
// Extract data and pass it to callback
pastedData = e.clipboardData.getData('text/html');
processPaste(editableDiv, pastedData);
// Stop the data from actually being pasted
e.stopPropagation();
e.preventDefault();
return false;
}
}
// Everything else: Move existing element contents to a DocumentFragment for safekeeping
savedContent = document.createDocumentFragment();
while(editableDiv.childNodes.length > 0) {
savedContent.appendChild(editableDiv.childNodes[0]);
}
// Then wait for browser to paste content into it and cleanup
waitForPastedData(editableDiv, savedContent);
return true;
}
function waitForPastedData (elem, savedContent) {
// If data has been processes by browser, process it
if (elem.childNodes && elem.childNodes.length > 0) {
// Retrieve pasted content via innerHTML
// (Alternatively loop through elem.childNodes or elem.getElementsByTagName here)
var pastedData = elem.innerHTML;
// Restore saved content
elem.innerHTML = "";
elem.appendChild(savedContent);
// Call callback
processPaste(elem, pastedData);
}
// Else wait 20ms and try again
else {
setTimeout(function () {
waitForPastedData(elem, savedContent)
}, 20);
}
}
function processPaste (elem, pastedData) {
// Do whatever with gathered data;
alert(pastedData);
elem.focus();
}
// Modern browsers. Note: 3rd argument is required for Firefox <= 6
if (editableDiv.addEventListener) {
editableDiv.addEventListener('paste', handlepaste, false);
}
// IE <= 8
else {
editableDiv.attachEvent('onpaste', handlepaste);
}
$("#id").on('paste', function(e) {
var pastedText = undefined;
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else {
pastedText = e.originalEvent.clipboardData.getData('Text');//e.clipboardData.getData('text/plain');
}
alert(pastedText);
});