事件类型—剪贴板事件

空城里的往日时光

于 2019-05-17 23:48:50 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42472040/article/details/90301571

版权

JavaScript 专栏收录该内容

65 篇文章

订阅专栏

博客介绍了剪贴板事件分类，包括copy、cut、paste等六个事件。还阐述了clipboardData对象，它可操作剪切板数据，在不同浏览器中有不同表现，有getData、setData、clearData三个方法。最后介绍了事件应用，如屏蔽剪贴板和过滤字符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件分类

二、clipboardData对象

三、事件应用

一、事件分类

剪贴板事件有六个，分别是copy、cut、paste、beforecopy（忽略）、beforecut（忽略）和beforepaste（忽略）。

<input value="text" id="div">
<script>
    //copy事件：执行复制时触发
    //cut事件：执行剪切时触发
    //paste事件：执行粘贴时触发
    div.onpaste = div.oncopy = div.oncut = function(e){
        e = e || event;
        div.value = e.type;
        return false; //取消事件默认行为
    }
</script>

二、clipboardData对象

该对象可以操作剪切板中的数据，ie浏览器中，该对象是window的成员，其他浏览器中，该对象是事件对象的属性。该对象有三个方法，其一getData()，其二setData()，其三clearData()，使用这些方法时需要指定数据类型，ie中数据类型为text或URL，其它浏览器中为mime类型（text/plain）。

<script>
    div.onpaste = div.oncopy = div.oncut = function(e){
        e = e || event;
        var clipboardData = e.clipboardData || window.clipboardData;
    }
</script>

getData()

该方法用于从剪切板中获取数据，它需要一个参数，表示要获取的数据的类型。

<input id="div" value="123">
<script>
    div.onpaste = function(e){
        e = e || event;
        var clipboardData = e.clipboardData || window.clipboardData;
        div.value = '测试' + clipboardData.getData('text');
        return false;
    }
</script>

setData()

该方法用于向剪切板中添加数据，它需要两个参数，其一数据类型，其二文本内容。ie中该方法的返回结果是一个布尔值，添加成功返回true，失败返回false。其他浏览器中该方法无返回值。paste事件中只有ie支持该方法，谷歌静默失败，火狐报错。

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

clearData()

该方法用于从剪切板中删除数据，它需要一个参数，表示要删除的数据的类型。ie中该方法的返回结果是一个布尔值，删除成功返回true，失败返回false。其他浏览器中该方法的返回结果为undefined。

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

三、事件应用

屏蔽剪贴板

通过阻止默认行为屏蔽剪贴板。

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

过滤字符

<!--只允许粘贴数字-->
<input id="div">
<script>
    div.onpaste = function(e){
        e = e || event;
        var clipboardData = e.clipboardData || window.clipboardData;
        if(!/^\d+$/.test(clipboardData.getData('text'))){
            return false;
        }    
    }
</script>