有时候经常在网上看到网页可以读取系统粘贴板的内容,可以显示文字和图片等内容,就挺好奇的,所以就研究了一下。
基本原理
通过监听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等截图工具粘贴图片
好了,就介绍到这里。