废话少说:上代码!
textarea id="bar">这里的文本可被复制或者剪切</textarea>
<div style="text-align: center;" class="floating-button">
<button class="van-button van-button--info van-button--normal van-button--round" id="wechatId"
data-clipboard-action="cut" data-clipboard-target="#bar"
style="width: 6rem; height:1.5rem;color: white;
background: linear-gradient(to right, #FF6666, rgb(245, 154, 35)); border: 0px;"
onclick="wechatOpen()">
<div class="van-button__content"><span class="van-button__text" >复制微信打开</span></div></button>
<button class="van-button van-button--info van-button--normal van-button--round"
style="margin-left: 2rem; width: 6rem; height:1.5rem;color: white; background: linear-gradient(to right, #FF6666, rgb(245, 154, 35)); border: 0px;"
onclick="rediretOpen()">
<div class="van-button__content"><span class="van-button__text" >直接打开</span></div></button>
</div>
<script>
var basePath ='/wechatTest';
$(document).ready(function (){
//4. 实例化clipboard
var clipboard = new ClipboardJS('#wechatId');
//5. 复制成功的响应事件【按F12控制台可见】
clipboard.on('success', function (e) {
console.log(e);
//打印动作信息(copy或者cut)
console.info('Action:', e.action);
//打印复制的文本
console.info('Text:', e.text);
//打印trigger
console.info('Trigger:', e.trigger);
});
//6. 复制失败的响应事件
clipboard.on('error', function (e) {
console.log(e);
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
});
/**
* 微信打开
*/
function wechatOpen() {
// 调用截切版
copyText("这是需要复制的文本");
}
function copyToClipboard(text) {
var $tempInput = $("<input>");
$("body").append($tempInput);
$tempInput.val(text).select();
try {
var successful = document.execCommand("copy");
var msg = successful ? "复制成功" : "复制失败";
console.log(msg);
window.location.href = "weixin://";
} catch (err) {
console.error("复制失败: ", err);
}
$tempInput.remove();
}
function copyText(text) {
var clipboard = navigator.clipboard;
clipboard.writeText(text);
console.log("文本已复制到剪贴板。");
window.location.href = "weixin://";
}
/**
* 手机浏览器打开
*/
function rediretOpen() {
}
</script>
这其中 用了 三种方法 ,只有引用使用 ClipboardJS 引入外部库才可以,
1, 最老版本 document.execCommand("copy"); 已经被淘汰了,而且测试还不好用!
2,下边这种是要vue安装的,有环境限制,像我中原生党不行!!!
var clipboard = navigator.clipboard;