每天一个jquery插件-剪切板操作
剪切板操作
额，浅尝辄止，就是看看别人的对剪切板的操作是咋实现的，因为这个我发现一个大宝贝，讲真的之前不知道哪找这个web开发api的列表，现在让我找到一个，所以就可以对着这个接口集合挨个看看能做出哪些有意思的插件了
地址
效果如下
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作剪切板</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
.div{
border: 1px solid lightgray;
width: 90%;
height: 200px;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="div">复制1</div>
<div class="div">复制2</div>
</body>
</html>
<script>
$(function(){
$(".div").click(function(){
//更改剪切板文本
var str = $(this).text();
navigator.clipboard.writeText(str).then(function(){
console.log("成功写入")
},function(){
console.log("写入失败，没权限")
});
//读取剪切板文本
navigator.clipboard.readText().then(res=>{
console.log(res);
});
})
})
</script>
咋用的
- 关于文本操作就是俩接口，当然这个是需要用户先主动授权剪切板操作权限的，分为写入和写出
- 写入就是writetext，然后是一个promise的形式接收浏览器的api结果
- 读取就是readtext，差不多同上，知道promise的用法就很容易理解这个接口的回调内容是个啥了，不过还是去我上面分享的地址找找读把，我也不熟现在，额