js获取剪切板文字图片方法

有时候经常在网上看到网页可以读取系统粘贴板的内容，可以显示文字和图片等内容，就挺好奇的，所以就研究了一下。

基本原理

通过监听input的paste事件，获取到clipboardData内容，然后显示到页面上面。

方法实现

html部分

<div class="paste"><select name="type" id="type"><option value="text">文本</option><option value="richText">富文本</option><option value="img">图片</option></select><input id="content" type="text" placeholder="请输入粘贴内容"><p>您粘贴的内容是： </p><p id="view"></p><div>测试内容：<a href="https://www.baidu.com/">https://www.baidu.com/</a></div>
</div>

css部分

.paste {margin: 0 auto;max-width: 320px;
}
select {width: 80px;height: 30px;
}
input {width: 225px;height: 25px;
}
#view {padding: 10px;border: 2px dotted pink;
}

js部分

let type = document.querySelector('#type');
let content = document.querySelector('#content');
let view = document.querySelector('#view');
showClip(type.value, content, view);type.addEventListener('change', function (e) {  let currentType = e.target.value;content.value = '';view.innerText = '';showClip(currentType, content, view);
})function showClip (type, content, view) {content.addEventListener('paste', function (event) {  let clipboardData = event.clipboardData || event.originEvent.clipboardData;let items = clipboardData.items;if (type == 'text') {if (items.length > 0 && items[0].kind == 'string') {items[0].getAsString(function (e) {  view.innerText = e;})}}if (type == 'richText') {if (items.length > 0 && items[1].kind == 'string') {items[1].getAsString(function (e) {  view.innerHTML = e;})}}if (type == 'img') {if (items.length > 0 && items[0].kind == 'file') {let blob = items[0].getAsFile();let reader = new FileReader();reader.readAsDataURL(blob);reader.onload = function (e) {  let img = document.createElement('img');img.src = e.target.result;view.appendChild(img);}}}})
}

效果预览

粘贴显示文本内容
粘贴显示富文本内容
利用微信，qq等截图工具粘贴图片

好了，就介绍到这里。

js获取剪切板文字图片方法相关推荐

js获取剪切板内容（企业微信内嵌网页）
js获取剪切板内容应用场景剪切板内容获取腾讯会议获取会议时间.会议链接和会议号更新========================= 企业微信页面剪切板内容读取 iPhone无法进入页面零宽 ...
js 获取剪切板内容
1. 粘贴事件 const items = (event.clipboardData || window.clipboardData).itemsconst len = items.lengthlet ...
js读取剪切板的图片
<script> function test(evt){ //for chrome var clipboardData = evt.clipboardData; for(var i=0; ...
python获取剪切板图片_python 获取剪切板内容的两种方法
第一种 # -*- coding: utf-8 -*- # @Time : 2020/3/16 21:26 # @File : get_text_from_cupboard_13.py # @Auth ...
微信小程序点击复制文本到剪切板，获取剪切板内容
设置剪切板:wx.setClipboardData 获取剪切板:wx.getClipboardData api:https://developers.weixin.qq.com/miniprogram ...
从剪切板粘贴图片上传
一个需求:让用户使用剪切板来粘贴图片(而不是将图片保存到本地,然后再选取文件上传) fakepath是什么鬼今天做图片上传时发现,不论是什么路径上传的文件,路径都变成了这种格式 "C:\f ...
java 获取剪切板_Java中有关剪切板的操作
本地剪贴板只在当前虚拟机中有效.Java允许多个本地剪贴板同时存在,可以方便地通过剪贴板的名称来进行存取访问. 系统剪贴板与同等操作系统直接关连,允许应用程序与运行在该操作系统下的其它程序之间进行信息 ...
html粘贴excel内容,如何用JS解析剪切板里的excel内容
前言这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开.倒是通过实践 ...
android 获取剪切内容,Android Q 获取剪切板内容
背景有时候我们需要在app启动时去获取用户复制的内容,这时候需要进行剪切板相关操作,而Android Q开始只有系统默认的输入法应用或者应用处于焦点时才能获取到剪切板的数据,经测试只有targetS ...

js获取剪切板文字图片方法

基本原理

方法实现

效果预览

js获取剪切板文字图片方法相关推荐

最新文章

热门文章