Home >Web Front-end >JS Tutorial >How to implement copy function using js code

How to implement copy function using js code

亚连Original: 2018-06-13 14:35:362669browse

This article mainly introduces the js implementation of the copy function (a collection of multiple methods). Friends who need it can refer to it

1. Click the button to copy the content in the text box

<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好，可贴粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />

2. Copy the topic address and url address, and send it to your friends on QQ/MSN

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js复制代码</title>
</head>
<body>
<p>
<input type="button" name="anniu1" onClick=&#39;copyToClipBoard()&#39; value="复制专题地址和url地址，传给QQ/MSN上的好友">
<script language="javascript">
function copyToClipBoard(){
var clipBoardContent="";
clipBoardContent+=document.title;
clipBoardContent+="";
clipBoardContent+=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");
}
</script>

3. Copy the url directly

<input type="button" name="anniu2" onClick=&#39;copyUrl()&#39; value="复制URL地址">
<script language="javascript">
function copyUrl()
{
var clipBoardContent=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功!");
}
</script>

4. When clicking the text box, copy the content in the text box Content

<input onclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
</script>

5. Copy the content in the text box or hidden field

<script language="javascript">
function CopyUrl(target){
target.value=myimg.value;
target.select(); 
js=myimg.createTextRange(); 
js.execCommand("Copy");
alert("复制成功!");
}
function AddImg(target){
target.value="[IMG]"+myimg.value+"[/ img]";
target.select();
js=target.createTextRange(); 
js.execCommand("Copy");
alert("复制成功!");
}
</script>

6. Copy the content in the span tag

<script type="text/javascript">
</script>
<br />
<br />
<script type="text/javascript">function copyText(obj) 
{
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
alert("复制成功!");
}
</script>

7. The browser is compatible with copyToClipboard("copy Content")

function copyToClipboard(txt) {
      if (window.clipboardData) {
        window.clipboardData.clearData();
        clipboardData.setData("Text", txt);
        alert("复制成功！");

      } else if (navigator.userAgent.indexOf("Opera") != -1) {
        window.location = txt;
      } else if (window.netscape) {
        try {
          netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        } catch (e) {
          alert("被浏览器拒绝！\n请在浏览器地址栏输入&#39;about:config&#39;并回车\n然后将 &#39;signed.applets.codebase_principal_support&#39;设置为&#39;true&#39;");
        }
        var clip = Components.classes[&#39;@mozilla.org/widget/clipboard;1&#39;].createInstance(Components.interfaces.nsIClipboard);
        if (!clip)
          return;
        var trans = Components.classes[&#39;@mozilla.org/widget/transferable;1&#39;].createInstance(Components.interfaces.nsITransferable);
        if (!trans)
          return;
        trans.addDataFlavor("text/unicode");
        var str = new Object();
        var len = new Object();
        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
        var copytext = txt;
        str.data = copytext;
        trans.setTransferData("text/unicode", str, copytext.length * 2);
        var clipid = Components.interfaces.nsIClipboard;
        if (!clip)
          return false;
        clip.setData(trans, null, clipid.kGlobalClipboard);
        alert("复制成功！");
      }
    }

js realizes automatic text selection when clicking

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动选择文本框/编辑框中的文字</title>
<script type="text/javascript">
function Myselect_txt(){
 if (document.form1.title.focus){
  document.form1.title.select();}
}
function Myselect_txtarea(){
 if (document.form1.content.focus){
  document.form1.content.select();}
}
</script>
</head>
<body style="font-size:12px">
<table width="443" height="97" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f9f9f9">
 <form name="form1">
  <tr bgcolor="#214994">
   <td height="25" colspan="2"><p align="center"><font color="#FFFFFF">新闻信息修改</font></p></td>
  </tr>
  <tr>
   <td width="80" height="28"><p align="right"><font color="#214994">新闻标题：</font></p></td>
   <td width="363"><input name="title" type="text" size="50" value="今日新闻头条" onClick="Myselect_txt()"></td>
  </tr>
  <tr>
   <td height="20"><p align="right"><font color="#214994">新闻内容：</font></p></td>
   <td rowspan="2"><textarea name="content" cols="50" rows="6" onClick="Myselect_txtarea()">今日,据相关方面报道,...</textarea></td>
  </tr>
  <tr>
   <td height="10"> </td>
  </tr>
  <tr>
   <td height="32" colspan="2">
    <p align="center">
     <input name="add" type="submit" id="add" value="添加">
 
     <input name="Submit" type="reset" value="重置">
   </p></td>
  </tr>
 </form>
</table>
</body>
</html>

The most commonly used and concise one is still this, with less code and reduced page loading speed

function copyToClipboard(txt) {  
	if(window.clipboardData){  
		window.clipboardData.clearData();  
		window.clipboardData.setData("Text", txt);
		alert(&#39;复制成功！&#39;)
	}else{
		alert(&#39;请手动复制！&#39;)	
	}  
}

The above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

How to modify the a tag style in vue?

How to manage header tags using vue-meta

Some common problems with Nuxt.js (detailed tutorial)

Install the latest version of npm in nodejs (detailed tutorial)

The above is the detailed content of How to implement copy function using js code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement audio playback function using JavaScriptNext article：How to implement audio playback function using JavaScript

See more

How to implement copy function using js code

Related articles