JS 点击复制文本

最新推荐文章于 2024-08-16 15:55:37 发布

林中明月间。

最新推荐文章于 2024-08-16 15:55:37 发布

阅读量1.3k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

120 篇文章 9 订阅

订阅专栏

上代码：

参考地址：https://www.cnblogs.com/tylerdonet/p/4533782.html

https://www.cnblogs.com/minigrasshopper/p/8967339.html

兼容clipboardData： https://www.jianshu.com/p/1a74c112f962

点击button，复制input框的值；使用的是 document.execCommand('copy')的方法；

js:
<script>
  function copyText(){
  	var Url2=document.getElementById("text1");
  	Url2.select(); // 选择对象
 	document.execCommand('copy'); // 执行浏览器复制命令
  	alert('已复制好，可贴粘');
  }
  </script>
 <input type="text" id="text1">
 <input type="button" onClick="copyText()" value="点击复制代码" />

jq:
$('.copyBtn').click(function () {
    $('.copyText').select();    //选中要复制内容的输入框
    document.execCommand("copy",false,null);
})

复制内容后附加信息：
</script>
        function SetCopyContent() {
            window.event.returnValue = false;
            var content = window.clipboardData.getData("Text") + "/r/n";
            content += "本资源来自简书 " + this.location.href;
            window.clipboardData.setData('Text', content);
            alert("复制成功");
        }
document.body.oncopy = function(){}//复制之后的事件
 </script>
<body  oncopy="SetCopyContent();" > 
</body>

常见命令：
1. copy 拷贝当前选中内容到剪贴板。

document.execCommand("copy",false,null);

2. selectAll 选中编辑区里面的全部内容

document.execCommand("selectAll");

3. Bold 将选中的内容加粗

document.execCommand("Bold");//需要在designMode模式下，document.designMode = 'On';打开这个模式

4. hiliteColor
document.execCommand("hiliteColor",true,'yellow');//同需要在dedsignMode模式下，还需设置document.contentEditable = true;

5. fontSize

document.execCommand("fontSize",true,10);

可能你还有疑问：

Javascript execCommand 函数使用

1. document.execCommand()函数简介

execCommand函数允许用户对当前文档、当前选中区域或者给定范围执行一个浏览器内部命令

2. 函数使用

bool = document.execCommand(aCommandName, [aShowDefaultUI, aValueArgument])
其中，aCommandName是命令参数，aShowDefaultUI表示是否展示ui界面，aValueArgument表示可用值或者属性值,该函数返回布尔型变量表示该操作是否被支持或者被启用。