粘贴事件（js监听粘贴事件）

最新推荐文章于 2024-07-24 15:08:13 发布
最新推荐文章于 2024-07-24 15:08:13 发布
阅读量1.6w 收藏 8
点赞数
分类专栏： 随笔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body,html{
text-align: center;
}
#editDiv{
width:1000px;
display: inline-block;
height: 800px;
background:#fff;
border-radius:10px;
line-height: 20px;
padding:10px;
font-size: 14px;
color:#666;
resize: none;
outline: none;
overflow-y: scroll;
}
#editDiv{
border:1px solid #333;
border-color:rgba(169,169,169,1);
text-align: left;
}
</style>
</head>
<body>
<div id="editDiv" contenteditable="true" autofocus="autofocus">
</div>
</body>
<script>
document.querySelector('#editDiv').addEventListener('paste',function(e){
var cbd = e.clipboardData;
    var ua = window.navigator.userAgent;
    // 如果是 Safari 直接 return
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return ;
    }
    // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }
    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        if(item.kind == "file"){
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
            // blob 就是从剪切板获得的文件 可以进行上传或其他操作
            /*-----------------------与后台进行交互 start-----------------------*/
/*var data = new FormData();
data.append('discoverPics', blob);
$.ajax({
    url: '/discover/addDiscoverPicjson.htm',
    type: 'POST',
    cache: false,
    data: data,
    processData: false,
    contentType: false,
    success:function(res){
    var obj = JSON.parse(res);
    var wrap = $('#editDiv');
    var file = obj.data.toString();
    var img = document.createElement("img");
        img.src = file;
wrap.appendChild(img);
    },error:function(){
   
    }
})*/
/*-----------------------与后台进行交互 end-----------------------*/
/*-----------------------不与后台进行交互 直接预览start-----------------------*/
var reader = new FileReader();
var imgs = new Image(); 
imgs.file = blob;
reader.onload = (function(aImg) {
      return function(e) {
        aImg.src = e.target.result;
      };
    })(imgs);
    reader.readAsDataURL(blob);
    document.querySelector('#editDiv').appendChild(imgs);
    /*-----------------------不与后台进行交互 直接预览end-----------------------*/
        }
    }
}, false);
</script>
</html>
Leaves_Yu
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js捕获鼠标右键菜单中的粘帖事件实现代码
10-27
突发奇想比如点击菜单中的粘帖后事件如何捕获，如下图所示,用的jQuery中的paste事件，如想获得粘帖文本要使用setTimeout控制下时间，感兴趣的朋友可以参考下
基于js粘贴事件paste简单解析以及遇到的坑
12-12
在用户执行粘贴操作的时候，js能够获得剪切板的内容，本文讨论一下这个问题。 目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持Chrome和Safari，一些Chrome的新特性是可以尽情使用了，还是能够覆盖到大部分用户的。所以本文只讨论Chrome如何使用和如何阻止Safari，原理大概了解了，再研究其他浏览器相关的问题就容易多了。 paste事件 可以用js给页面中的元素绑定paste事件的方法，当用户鼠标在该元素上或者该元素处于focus状态，绑定到paste事件的方法就运行了。 绑定的元素不一定是input，普通的div也是可以绑定的，如果是给docume
JavaScript 粘贴事件、拷贝事件、获取拷贝的内容、将文本复制到剪贴板
 我的博客
05-04 2404
JavaScript 粘贴事件、拷贝事件、获取拷贝的内容、将文本复制到剪贴板
【element ui】input输入控件绑定粘贴事件，从 Excel 复制的数据粘贴到输入框（el-input）时自动转换为逗号分隔的数据
最新发布
DecorateCC的博客
07-24 693
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
JS点击复制文字或图片，和监控鼠标右键和ctrl+c事件
hql1024的博客
11-25 2718
js点击复制图片或文字
【JavaScript】事件监听：键盘事件
weixin_47040861的博客
01-15 5624
本文章简单介绍一下，JavaScript里面的键盘事件。
js监听复制事件，并修改内容
学习使我快乐_玉祥
12-08 1979
【代码】js监听复制事件，并修改内容。
js粘贴监听事件
weixin_41463944的博客
08-10 3448
document.addEventListener('paste', (event) => { // 获取解析 粘贴的文本 let text = (event.clipboardData || window.clipboardData).getData('text') })
js实现监听ctrl+v粘贴事件获取复制的内容，并把截取的图片转base64
DavidZhao的博客
05-08 688
在 JavaScript 中，可以通过添加 'paste' 事件监听器来监听粘贴事件。
【前端】js监听粘贴事件 获取到粘贴的图片展示并上传
我是Superman丶的博客
11-10 1187
要在JavaScript中监听粘贴事件、获取粘贴的图片并展示，以及上传图片，你可以使用以下代码作为起点。请注意，这里使用了一个简单的HTML结构，你可能需要根据你的应用程序的需求进行适当的修改。读取图片数据，并在页面上展示图片。在展示图片的同时，你可以执行上传操作，将图片上传到服务器。如果你想通过文件选择器上传图片，也提供了相应的代码。事件，检查粘贴板中的每一项是否是图片。如果是图片，我们使用。【前端】js监听粘贴事件 获取粘贴的图片。js 监听粘贴事件 拿到图片 展示并上传。这个例子中，我们监听了。
JS监听复制、粘贴、剪贴
十三丘
10-12 7737
本文介绍 js监听 复制 粘贴 剪贴 的使用方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge
如何阻止复制剪切和粘贴事件为了表单内容的安全
11-30
在网络安全和敏感信息保护...总的来说，阻止复制、剪切和粘贴事件是提高表单安全性的手段之一，但必须与其他安全策略相结合，以提供更全面的防护。在实际开发中，应根据具体需求和场景来权衡用户体验与安全性的平衡。
js和jquery实现监听键盘事件示例代码
11-22
JavaScript 和 jQuery 是两种广泛用于网页开发的脚本语言，它们都可以用来监听用户的键盘事件，以实现特定的功能。本文将详细讲解如何使用这两种技术来监听键盘事件，特别是如何检测用户是否按下特定的组合键，如 ...
js 文本框监听粘贴事件，获取粘贴板上的图片数据
热门推荐
luyangbin01的专栏
04-07 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="myInput" /> <script> document.getElementById('myInput').addEventLis
js粘贴监听事件获取excel内容或图片或HTML带样式的内容
細水、長流√的专栏
09-08 717
经过一段小探索，完成了自己的需求，收获了三个关键字知识点：DOMParser。每个都值得好好挖掘~js粘贴监听事件_js监听粘贴事件_程序员阿明的博客-CSDN博客js粘贴板获取图片或HTML带样式的内容_前端黑猫的博客-CSDN博客IE 11粘贴仅适用于输入字段-腾讯云开发者社区-腾讯云javascript - 实践笔记：js解析剪切板里的excel内容 - I Dont know - SegmentFault 思否电脑关键字：粘贴事件。
js粘贴事件操作
weixin_30326515的博客
01-26 323
单纯禁止粘贴操作 <input type="text" class="name" name="haha" onkeyup="this.value=this.value.replace(/\D/g,'')" onpaste="return false;"> 对粘贴的内容进行正则验证 <input type="text" class="name" name="hah...
前端js实现粘贴图片到可编辑的div(其他标签也可)中
一条宝鱼的专栏
06-03 1689
输入框中要实现粘贴图片功能，不能用input、textarea等输入框作为父容器，因为input、textarea中只能接受字符串，对于html标签不进行转义以及渲染。所以用contenteditable='true'属性来使div(其他容器也可)实现可编辑，来模拟输入框，实现粘贴图片至输入框中的效果，提交数据给后端的时候可以用form提交，也可用异步提交，form提交的时候将div中的数据全部放...
监听粘贴时间，获取粘贴的数据
晓枫
09-05 430
/可以获取用户选中复制的数据。},paste: function(e) {//paste事件。copy: function(e) {//copy事件。var cpTxt = "复制的数据";
js 监听复制粘贴
05-27
在 JavaScript 中，可以通过监听相应的事件来实现复制粘贴的监听，具体实现如下： 复制事件： ```javascript document.addEventListener('copy', function(event) { var clipboardData = event.clipboardData || window.clipboardData; var text = window.getSelection().toString(); if (clipboardData && text) { event.preventDefault(); clipboardData.setData('text/plain', text); } }); ``` 粘贴事件： ```javascript document.addEventListener('paste', function(event) { var clipboardData = event.clipboardData || window.clipboardData; var text = clipboardData.getData('text/plain'); if (text) { event.preventDefault(); // 处理粘贴的文本 } }); ``` 这里通过 `addEventListener` 方法来添加事件监听器，`copy` 和 `paste` 分别代表复制和粘贴事件，然后在事件处理函数中可以获取到剪切板中的文本内容，从而进行相应的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值