每天学一个jquery插件-剪切板操作

每天一个jquery插件-剪切板操作

剪切板操作

额,浅尝辄止,就是看看别人的对剪切板的操作是咋实现的,因为这个我发现一个大宝贝,讲真的之前不知道哪找这个web开发api的列表,现在让我找到一个,所以就可以对着这个接口集合挨个看看能做出哪些有意思的插件了

地址
效果如下
每天学一个jquery插件-剪切板操作_第1张图片

代码部分


<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">复制1div>
		<div class="div">复制2div>
	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的用法就很容易理解这个接口的回调内容是个啥了,不过还是去我上面分享的地址找找读把,我也不熟现在,额

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)