js 操作剪切板

时间:2023-03-08 17:57:32
js 操作剪切板

1.IE浏览器 window.clipboardData:

setData() //设置值

getData()//获取值

clearData()//删除值

            /*******
** IE 浏览器下支持window.clipboardData (兼容IE7+)
** 对于URL类型的数据失效
********/
//复制内容到黏贴板
$(':button:first').click(function () {
window.clipboardData.setData('text', "asdfasdfasdf");
//window.clipboardData.setData('URL', 'http://www.baidu.com/');
alert('复制成功');
});
//黏贴内容
$(':button:eq(1)').click(function () {
//获取黏贴板内容
/*
* 获取数据失败,返回null
*/
var result = window.clipboardData.getData('text');
//var result = window.clipboardData.getData('URL'); $('#txtTwo').html($('#txtTwo').html() + result);
}); //清空text数据
$(':button:eq(2)').click(function () {
window.clipboardData.clearData('text');
alert('清空成功');
});

2.IE7+和其他浏览器

1.文本框paste监听

            //paste 事件 支持 IE7+和其他
//1.禁用文本框的粘贴事件
//粘贴事件 paste
$('#txtOne').on('paste', function (e) {
e.preventDefault();
}); //注:使用jQuery 绑定事件,无法访问到 e.clipboardData
$('#txtOne').on('paste', function (e) {
console.info(e);
var clip = e.clipboardData;
var text = clip.getData('text');
$('.divOne').append(text + '<br>');
}); //2.监听paste
var txtOne = document.getElementById('txtOne');
EventUtil.addHandler(txtOne, 'paste', function (e) {
console.info(e);
event = EventUtil.getEvent(e);
var text = EventUtil.getClipboardText(event);
$('.divOne').append(text + '<br>');
}); //3.paste时 有选择粘贴
var txtOne = document.getElementById('txtOne');
EventUtil.addHandler(txtOne, 'paste', function (e) {
var event = EventUtil.getEvent(e);
var text = EventUtil.getClipboardText(event);
console.log(text.length);
if (text.length < 10) {
$('.divOne').append(text + '<br>');
}
else {
//禁用黏贴默认操作
EventUtil.preventDefault(event);
}
});

注:jquery event对象不能访问event.clipboardData  说明

jquery.event

js 操作剪切板

dom.event 

js 操作剪切板

2.contenteditable 元素paste事件监听

    <div id="divOne" class="divOne" contenteditable="true">
</div>
            //contenteditable 元素的paste事件
//1.监听paste事件
$('.divOne').on('paste', function (e) {
var thisText = $(this).text();
$('#result').append(thisText);
}); //2.监听paste事件2
var divOne = document.getElementById('divOne');
EventUtil.addHandler(divOne, 'paste', function (e) {
var event = EventUtil.getEvent(e);
var text = EventUtil.getClipboardText(event);
$('#result').append(text + "<br>");
});

使用帮助类:

var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
getClipboardText: function (event) {
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
setClipboardText: function (event, value) {
if (event.clipboardData) {
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData) {
return window.clipboardData.setData("text", value);
}
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
};

更多:

JavaScript操作剪贴板(转)