很多网站当复制粘贴的时候，都会出现有关剪贴板的相关提示，在刚刚入行前端工程师的时候，我还在一直纳闷，这是怎么实现的呢。如今，咱们再也不用纳闷了，因为已经有浏览器把剪贴板相关事件纳入标准了。
ie是最早支持与剪贴板相关的事件，以及通过javascript访问剪贴板数据的浏览器。ie的实现成为了事实上的标准，随后firefox 3+ 、 chrome和safari 2+都支持类似的事件和剪贴板的访问，但是opera不支持通过javascript访问剪贴板。直到html5的到来，将剪贴板相关事件纳入了html5规范。下面就是6个剪贴板事件。
beforecopy：在发生复制操作前触发;
copy：在发生复制操作的时候触发;
beforecut：在发生剪切操作前触发;
cut：在发生剪切操作的时候触发;
beforepaste：在发生粘贴操作前触发;
paste：在发生粘贴操作的时候触发。
因为没有针对剪贴板操作的标准，这些事件及相关对象会因为浏览器而不一样。在firefox、chrome和safari中，beforecopy、beforecut和beforepaste事件只会在显示针对文本框的上下文菜单(预期将发生剪贴板事件)的情况下触发。但是ie则会在触发copy、cut和paste事件之前先触发这些事件。至于copy、cut和paste事件，只要是在上下文菜单(右键菜单)中选择了相应选项，或者使用了相应的键盘组合键如(ctrl+v)，所有浏览器都会触发他们。
在实际的事件发生之前，通过beforecopy、beforecut和beforepaste事件可以在向剪贴板发送数据，或者从剪贴板取得数据之前修改数据。不过，取消这些事件并不会取消对剪贴板的操作，只有取消copy、cut和paste事件，才能阻止相应的操作发生。
要访问剪贴板中的数据，可以通过clipboarddata对象：在ie中，clipboarddata对象是window对象的属性;而在chrome、safari和firefox 4+中，clipboarddata对象是相应event对的属性。但是，在chrome、safari和firefox 4+中，只有在处理剪贴板事件期间，clipboarddata对象才有效，这是为了防止对剪贴板的未授权访问;在ie中，则可以随时访问clipboarddata对象。为了确保跨浏览器兼容，最好只在发生剪贴板事件期间使用这个对象。
这个clipboarddata对象有三个方法：getdata()方法、setdata()方法和cleardata()方法。其中，getdata()方法用于从剪贴板中获取数据，它接收一个参数，即要取得的数据格式。在ie中，有两种数据格式：’text”和”url”。在chrome、safari和firefox 4+中，这个参数是一种mime类型;不过，可以用”text”代表”text/plain”。
setdata()方法的第一个参数也是数据类型，第二个参数是要放在剪贴板中的文字。对于第一个参数，ie照样是支持”text”和”url”，而在chrome、safari中，仍然支持mime类型。但是与getdata()方法不同的是，在chrome、safari中的setdata()方法不能识别”text”类型。这两个浏览器在成功将文本放到剪贴板中后，都会返回true;否则返回false。好了说了这么多，就来看下面的小例子吧。
javascript代码
//获取剪贴板数据方法
function getclipboardtext(event){ var clipboarddata = event.clipboarddata || window.clipboarddata; return clipboarddata.getdata("text");
};
//设置剪贴板数据
function setclipboardtext(event, value){ if(event.clipboarddata){
return event.clipboarddata.setdata("text/plain", value);
}else if(window.clipboarddata){
return window.clipboarddata.setdata("text", value); }
};
这里的getclipboardtext()方法相对简单一些，它只要确定clipboarddata对象的位置，然后再以”text”类型调用getdata()方法即可。相应的，setclipboardtext()方法则稍微复杂一点。在取得clipboarddata对象之后，需要根据不同的浏览器实现为setdata()方法传入不同的类型(对于chrome和safari是”text/plain”;ie是”text”)。
在需要确保粘贴到文本框中的文本包含某些字符，或者符合某种格式的要求时，能够访问剪贴板是非常有用的。如，如果一个文本框只接受数值，那么就必须检测粘贴过来的值，以确保有效。在paste事件中，可以确定剪贴板中的值是否有效。如果无效就可以像下面例子中那样取消默认的行为。
html代码
<input type="text" id="inp" value="梦龙小站" />
javascript代码
window.onload = function(){
var oinp = document.getelementbyid("inp");
function getclipboardtext(event){
var clipboarddata = event.clipboarddata || window.clipboarddata;
return clipboarddata.getdata("text");
};
oinp.addeventlistener('paste',function(event){
var event = event || window.event;
var text = getclipboardtext(event);
if(!/^\d+$/.test(text)){
event.preventdefault();
}
}, false);
}
在这里，onpaste事件处理程序可以确保只有数值才会被粘贴到文本框中。如果剪贴板的值与正则表达式不匹配，则会取消粘贴操作。chrome、firefox和safari只允许在onpaste事件处理程序中访问getdata()方法。
因为不是所有浏览器都支持访问剪贴板，所以更简单的方法是屏蔽一或多个剪贴板操作。在支持copy、cut和paste事件的浏览器中(firefox 3+、safari、chrome和ie)，很容易阻止这些事件的默认行为。在opera中，则需要阻止那些会触发这些事件的按键操作，同事还要阻止在文本框中显示上下文菜单(右键菜单)。
虽然和剪贴板相关的事件已经纳入了html5规范当中，但是opera始终还不支持剪贴板相关事件，所以实际应用起来还是比较头疼的。html5实战与剖析之剪贴板事件就为大家介绍到这里了，更多有关html5的相关知识敬请关注梦龙小站的相关更新。
以上就是html5实战与剖析之剪贴板事件的内容。