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
dom.event
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; } } };
更多: