深入理解DOM事件类型系列第四篇——剪贴板事件

首页 > 代码库 > 深入理解DOM事件类型系列第四篇——剪贴板事件

深入理解DOM事件类型系列第四篇——剪贴板事件

2024-08-13 20:40:37 220人阅读

前面的话

　　剪贴板操作可能看起来不起眼，但是却十分有用，可以增强用户体验，方便用户操作。本文将详细介绍剪贴板事件

定义

　　剪贴板操作包括剪切(cut)、复制(copy)和粘贴(paste)这三个操作，快捷键分别是ctrl+x、ctrl+c、ctrl+v。当然也可以使用鼠标右键菜单进行操作

　　关于这3个操作共对应下列6个剪贴板事件

　　copy:在发生复制操作时触发

　　cut:在发生剪切操作时触发

　　paste:在发生粘贴操作时触发

　　IE浏览器只有在文本中选定字符时，copy和cut事件才会发生。且在非文本框中(如div元素)只能发生copy事件

　　firfox浏览器只有焦点在文本框中才会发生paste事件

<input value="text" id="test"><script>test.onpaste= test.oncopy = test.oncut = function(e){    e = e || event;    test.value = e.type;    return false;}</script>

　　beforecopy:在发生复制操作前触发

　　beforecut:在发生剪切操作前触发

　　beforepaste:在发生粘贴操作前触发

<input value="text" id="test"><script>test.onbeforepaste= test.onbeforecopy = test.onbeforecut = function(e){    e = e || event;    test.value = e.type;    return false;}</script>

对象方法

　　剪贴板中的数据存储在clipboardData对象中。对于IE浏览器来说，这个对象是window对象的属性；对于其他浏览器来说，这个对象是事件对象的属性

    e = e || event;    var clipboardData = http://www.mamicode.com/e.clipboardData || window.clipboardData;

　　这个对象有三个方法：getData()、setData()和clearData ()

getData()

　　getData()方法用于从剪贴板中取得数据，它接受一个参数，即要取得的数据的格式。在IE中，有两种数据格式："text" 和 "URL"。在其他浏览器中，这个参数是一种MIME类型；不过，可以用"text"代表

　　[注意]在IE浏览器中，cut和copy事件中的getData()方法始终返回null；而其他浏览器始终返回空字符串‘‘。但如果和setDada()方法配合，就可以正常使用

<input id="test" value="http://www.mamicode.com/123"><script>test.onpaste=function(e){    e = e || event;    var clipboardData = http://www.mamicode.com/e.clipboardData || window.clipboardData;    test.value = ‘测试‘ + clipboardData.getData(‘text‘);    return false;}</script>

setData()

　　setData()方法的第一个参数也是数据类型，第二个参数是要放在剪贴板中的文本。对于第一个参数的规则与getData()相同

　　在IE浏览器中，该方法在成功将文本放到剪贴板中后，返回true，否则返回false；而其他浏览器中，该方法无返回值

　　[注意]在paste事件中，只有IE浏览器可以正常使用setData()方法，chrome浏览器会静默失败，而firefox浏览器会报错

<input id="test" value="123"><script>test.oncopy=function(e){    e = e || event;    var clipboardData = e.clipboardData || window.clipboardData;    clipboardData.setData(‘text‘,‘测试‘);    test.value = clipboardData.getData(‘text‘);    return false;}</script>

clearData()

　　clearData()方法用于从剪贴板中删除数据，它接受一个参数，即要取得的数据的格式。在IE中，有两种数据格式："text"和"URL"。在其他浏览器中，这个参数是一种MIME类型；不过，可以用"text"代表

　　在IE浏览器中，该方法在成功将文本放到剪贴板中后，返回true，否则返回false；而其他浏览器该方法的返回值为undefined

　　[注意]在paste事件中，chrome浏览器和IE浏览器可以正常使用setData()方法，而firefox浏览器会报错

<input id="test" value="123"><script>test.oncopy=function(e){    e = e || event;    var clipboardData = e.clipboardData || window.clipboardData;    test.value = clipboardData.clearData(‘text‘);    return false;}</script>

应用

【1】屏蔽剪贴板

　　通过阻止默认行为来屏蔽剪贴板。对于一些受保护的文档来说是一种选择

<input value="text"><button id="test">屏蔽剪贴板</button><script>test.onclick = function(){    document.oncopy=document.oncut = document.onpaste = function(e){        e = e || event;        alert(‘该文档不允许复制剪贴操作，谢谢配合‘)        return false;    }    }</script>

　　如果确保粘贴到文本框中的文本中包含某些字符，或者符合某种形式时，可以使用剪贴板事件。比如只允许粘贴数字

<input id="test"><script>test.onpaste = function(e){    e = e || event;    var clipboardData = e.clipboardData || window.clipboardData;    if(!/^\d+$/.test(clipboardData.getData(‘text‘)))        return false;    }    }</script>

深入理解DOM事件类型系列第四篇——剪贴板事件

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 深入理解DOM事件类型系列第四篇——剪贴板事件