使用javascript实现点击复制到剪贴板

一、使用javascript实现点击复制到剪贴板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#distinguishResult{box-sizing: border-box;background-color: white;padding: 15px;border: 3px dashed #d4d4d4;flex: 1;height: 100%;color: #757575;}#distinguishResult button{outline: none;background-color: #09bd71;border: none;width: 80px;height: 30px;color: white;border-radius: 5px;margin-right: 10px;}#input{display: block;width: 200px;height: 30px;outline: none;border: 1px solid #eee;margin-bottom: 20px;padding-left: 10px;}</style>
</head>
<body><div id="distinguishResult"><input type="text" placeholder="请输入你要复制的内容" id="input" oninput="copy()"><button id="resultBtn">复制</button><span id="result">需要复制的内容显示：</span><input type="text" id="selectInput"></div>、<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>// input框的输入事件function copy(){var input = $('#input').val()$('#result').html(input)$('#selectInput').val(input)}//  点击复制的按钮$('#resultBtn').click(function(){$('#selectInput').select() // 选中内容document.execCommand('Copy') // 执行浏览器复制命令alert("复制成功")})</script>
</body>
</html>

注意：

如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板
但是 select() 方法只对 input 和 textarea 有效，对disabled属性的的input没有效果，可以在在页面中添加一个表单，把它隐藏掉，不能display:none，不然也拿不到复制的内容

使用javascript实现点击复制到剪贴板相关推荐

移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器...
移动端js实现点击复制到剪贴板,带提示,[真正]兼容所有浏览器,包括安卓和ios及uc.qq.微信.手机自带等浏览器. github,欢迎star: https://github.com/majian ...
JavaScript实现点击复制的功能
需求背景有些时候我们需要实现让用户点击一个按钮就可以复制文字的功能,那么你知道要怎么去做嘛? 代码实现 <!DOCTYPE html> <html lang="en&qu ...
移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器
查看demo 前言:在移动端上经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等,之前需求太紧急,基本上都使用了clipboard.js ,使用方法也很简 ...
javascript 将内容复制到剪贴板
javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime--20 ...
javascript : 点击按钮，把某标签中的内容复制到剪贴板
需求如题. 静态页面如下. 需要的库:jquery(不用应该也能做). 浏览器:PC chrome 68 Mobile MIUI9.5(Android 7) <p>1.用电脑打开网址:&l ...
复制链接到剪切板php,JavaScript实现复制到剪贴板的方法总结
在我们日常开发工作中,我们会经常用到粘贴复制这个功能,很多时候我们项目中也会出现让你实现复制到剪贴板的功能,下面我们就给大家介绍下JavaScript实现复制到剪贴板的方法总结! 一.实现点击按钮,复 ...
点击按钮自动复制到剪贴板的实现
应用场景:你可以在网页上放置文字,在点击文字后你就可以将文字所带的url复制到剪贴板,然后就可以复制到你想到的任何地方. 购票链接:<a href="javascript:void(0 ...
JAVASCRIPT复制到剪贴板
为什么80%的码农都做不了架构师?>>> 来源:我的博客最近答应张先生替 42qu 写一个短址服务,写的过程中学到若干新东西,JS操作剪贴板便是其中一例. Javascrip ...
javascript实现的复制到剪贴板
"复制到剪贴板"功能是我们每天都用几十次的功能,但是客户端API一直都很缺乏,一些较旧的API和浏览器实现需要一个可怕的"你确定?" - 风格的对话之前,内容将 ...
html点击按钮动复制推广地址,JavaScript实现点击按钮就复制当前网址
JavaScript实现点击按钮就复制当前网址点击按钮复制当前网址: 在大量的网站都有这样的功能,当点击一个按钮的时候可以复制当前页面的地址,以此可以方便网站用户对链接的存储,同时也便于网站的推广, ...

使用javascript实现点击复制到剪贴板

一、使用javascript实现点击复制到剪贴板

注意：

使用javascript实现点击复制到剪贴板相关推荐

最新文章

热门文章