HTML5实战与剖析之剪贴板事件

楼主
HTML5实战与剖析之剪贴板事件
[P][P][P][ul][li][P]  很多网站当复制粘贴的时候,都会出现有关剪贴板的相关提示,在刚刚入行前端工程师的时候,我还在一直纳闷,这是怎么实现的呢。如今,咱们再也不用纳闷了,因为已经有[URL=http://www.it165.net/edu/ewl/]浏览器[/URL]把剪贴板相关事件纳入标准了。[/P][P]  IE是最早支持与剪贴板相关的事件,以及通过JavaScript访问剪贴板数据的[URL=http://www.it165.net/edu/ewl/]浏览器[/URL]。IE的实现成为了事实上的标准,随后Firefox 3+ 、 Chrome和Safari 2+都支持类似的事件和剪贴板的访问,但是Opera不支持通过JavaScript访问剪贴板。直到HTML5的到来,将剪贴板相关事件纳入了HTML5规范。下面就是6个剪贴板事件。[/P][P]  [B]beforecopy[/B]:在发生复制操作前触发;[/P][P]  [B]copy[/B]:在发生复制操作的时候触发;[/P][P]  [B]beforecut[/B]:在发生剪切操作前触发;[/P][P]  [B]cut[/B]:在发生剪切操作的时候触发;[/P][P]  [B]beforepaste[/B]:在发生粘贴操作前触发;[/P][P]  [B]paste[/B]:在发生粘贴操作的时候触发。[/P][P]  因为没有针对剪贴板操作的标准,这些事件及相关对象会因为浏览器而不一样。在Firefox、Chrome和Safari中,beforecopy、beforecut和beforepaste事件只会在显示针对文本框的上下文菜单(预期将发生剪贴板事件)的情况下触发。但是IE则会在触发copy、cut和paste事件之前先触发这些事件。至于copy、cut和paste事件,只要是在上下文菜单(右键菜单)中选择了相应选项,或者使用了相应的键盘组合键如(ctrl+v),所有浏览器都会触发他们。[/P][P]  在实际的事件发生之前,通过beforecopy、beforecut和beforepaste事件可以在向剪贴板发送数据,或者从剪贴板取得数据之前修改数据。不过,取消这些事件并不会取消对剪贴板的操作,只有取消copy、cut和paste事件,才能阻止相应的操作发生。[/P][P]  要访问剪贴板中的数据,可以通过clipboardData对象:在IE中,clipboardData对象是window对象的属性;而在Chrome、Safari和Firefox 4+中,clipboardData对象是相应event对的属性。但是,在Chrome、Safari和Firefox 4+中,只有在处理剪贴板事件期间,clipboardData对象才有效,这是为了防止对剪贴板的未授权访问;在IE中,则可以随时访问clipboardData对象。为了确保跨浏览器兼容,最好只在发生剪贴板事件期间使用这个对象。[/P][P]  这个clipboardData对象有三个方法:getData()方法、setData()方法和clearData()方法。其中,getData()方法用于从剪贴板中获取数据,它接收一个参数,即要取得的数据格式。在IE中,有两种数据格式:’text”和”URL”。在Chrome、Safari和Firefox 4+中,这个参数是一种MIME类型;不过,可以用”text”代表”text/plain”。[/P][P]  setData()方法的第一个参数也是数据类型,第二个参数是要放在剪贴板中的文字。对于第一个参数,IE照样是支持”text”和”URL”,而在Chrome、Safari中,仍然支持MIME类型。但是与getData()方法不同的是,在Chrome、Safari中的setData()方法不能识别”text”类型。这两个浏览器在成功将文本放到剪贴板中后,都会返回true;否则返回false。好了说了这么多,就来看下面的小例子吧。[/P][/li][/ul][P][/P][/P][/P][/P]

获取剪贴板数据方法
[CODE]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);
     }
};[/CODE]

  这里的getClipboardText()方法相对简单一些,它只要确定clipboardData对象的位置,然后再以”text”类型调用getData()方法即可。相应的,setClipboardText()方法则稍微复杂一点。在取得clipboardData对象之后,需要根据不同的浏览器实现为setData()方法传入不同的类型(对于Chrome和Safari是”text/plain”;IE是”text”)。

  在需要确保粘贴到文本框中的文本包含某些字符,或者符合某种格式的要求时,能够访问剪贴板是非常有用的。如,如果一个文本框只接受数值,那么就必须检测粘贴过来的值,以确保有效。在paste事件中,可以确定剪贴板中的值是否有效。如果无效就可以像下面例子中那样取消默认的行为。


<input type="text" id="inp" value="梦龙小站" />


[CODE]indow.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);      
}[/CODE]

  在这里,onpaste事件处理程序可以确保只有数值才会被粘贴到文本框中。如果剪贴板的值与正则表达式不匹配,则会取消粘贴操作。Chrome、Firefox和Safari只允许在onpaste事件处理程序中访问getData()方法。

  因为不是所有浏览器都支持访问剪贴板,所以更简单的方法是屏蔽一或多个剪贴板操作。在支持copy、cut和paste事件的浏览器中(Firefox 3+、Safari、Chrome和IE),很容易阻止这些事件的默认行为。在Opera中,则需要阻止那些会触发这些事件的按键操作,同事还要阻止在文本框中显示上下文菜单(右键菜单)。

  虽然和剪贴板相关的事件已经纳入了HTML5规范当中,但是Opera始终还不支持剪贴板相关事件,所以实际应用起来还是比较头疼的。HTML5实战与剖析之剪贴板事件就为大家介绍到这里了,更多有关HTML5的相关知识敬请关注梦龙小站的相关更新。

电脑版 Page created in 0.0938 seconds with 4 queries.