`

JS页面复制

    博客分类:
  • JS
阅读更多

浏览网页时,常常看到“复制链接”、“复制代码”等按钮,今天也做了一个

1.复制文本框中文本

var clipText = document.getElementById(id).createTextRange();
clipText.execCommand("Copy");

 

示例代码

<html>
<head>
<title>JS复制</title>
<script type="text/javascript">
function copyText(id) {
	var targetText = document.getElementById(id);
	try {
		var clipText = targetText.createTextRange();
		clipText.execCommand("Copy");
		alert('复制成功,可以按Ctrl+V粘贴');
	} catch(e) {
		targetText.focus();//获得焦点
		targetText.select();//选中文本
		alert('您的浏览器不支持剪贴板复制,\n请按Ctrl+C复制链接。');
	}
}
</script>
</head>
<body>
<div>
	<input id="shareUrl" value="http://chenfeng0104.iteye.com" style="width:260px;"/>
	<input type="button" value="Copy" onclick="copyText('shareUrl');"/>
</div>
</body>
</html>
 

 

2.复制当前页面URL

<html>
<head>
<title>JS复制当前URL</title>
<script type="text/javascript">
	copyClipboard=function(txt){
		if(window.clipboardData){
			window.clipboardData.clearData();
			window.clipboardData.setData("Text",txt);
		}else if(navigator.userAgent.indexOf("Opera")!=-1){
			window.location=txt;
		}else if(window.netscape){
			try{
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
			}catch(e){
				alert("您的firefox安全限制限制您进行剪贴板操作,请打开’about:config’将  signed.applets.codebase_principal_support’设置为true’之后重试,相对路径为firefox根目录 /greprefs/all.js");
				return false;
			}
			var clip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance (Components.interfaces.nsIClipboard);
			if(!clip)return;
			var trans=Components.classes['@mozilla.org/widget/transferable;1'].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);
		}
	}

	function copyUserHomeToClipBoard(){
		var clipBoardContent = document.URL;
		var clipBoardTitle = document.title;
		if(copyClipboard(clipBoardContent)!=false){
			alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友!\r\n\r\n内容如下:\r\n"+clipBoardTitle+clipBoardContent);
		}
	}
</script>
</head>
<body>
<div>
<input type="button"  value="Copy" onclick="copyUserHomeToClipBoard();"/>
</div>
</body>
</html>
分享到:
评论

相关推荐

    使用clipboard.js实现页面内容复制到剪贴板

    总结,Clipboard.js是实现页面内容复制到剪贴板的一个高效工具,它简化了原本复杂的过程,让开发者能够快速地为网页添加复制功能。只需几步简单的配置,就能使用户体验得到显著提升。在实际项目中,可以根据具体需求...

    统计页面复制次数与内容存入excel

    综上所述,实现"统计页面复制次数与内容存入excel"涉及的技术包括JavaScript事件监听、本地存储操作、数据结构处理、以及Excel文件的读写。通过这些技术,你可以构建一个系统,实时监控和记录页面上特定内容的复制...

    js禁止页面复制功能禁用页面右键菜单示例代码.docx

    JS 禁止页面复制功能禁用页面右键菜单示例代码 本文将详细介绍如何使用 JavaScript 禁止页面复制功能和禁用页面右键菜单,包括禁用右键菜单、禁用复制功能、禁用剪切功能等。 禁用右键菜单 禁用右键菜单可以使用 ...

    js excel 批量复制数据到 html

    本教程将详细介绍如何使用JavaScript(js)实现从Excel文档批量复制数据并粘贴到HTML表格(table)中的技术。这一功能对于数据处理、报表展示以及用户交互等方面具有很高的实用价值。 首先,我们要明白JavaScript...

    ZeroClipboard.js实现js复制功能

    《使用ZeroClipboard.js实现JavaScript复制功能详解》 在Web开发中,我们经常遇到需要实现文本复制功能的情况,比如用户点击按钮就能将一段文字复制到剪贴板。在浏览器的沙盒环境中,JavaScript不能直接访问系统...

    手机移动端 js复制粘贴

    2. **选择要复制的文本**:确定要复制的文本,可以是页面上的某个元素,或者直接定义在JavaScript中的字符串。例如,如果要复制一个段落的文本: ```html 这是要复制的文本 ``` 3. **添加事件监听器**:使用...

    js实现点击后将文字或图片复制到剪贴板的方法

    本文将介绍如何利用JavaScript实现点击按钮后,将页面中的文字或图片复制到用户剪贴板中。 首先,需要了解的是,复制到剪贴板的操作通常是敏感操作,出于安全考虑,浏览器对这一行为进行了限制。在不同的浏览器中,...

    手机h5页面长按复制完整代码

    当用户希望从H5页面中复制文本时,尤其是代码片段,原生的长按操作可能无法满足需求,因为它通常只提供选择、剪切和粘贴等基本功能。为了在移动端实现更友好的长按复制体验,我们需要编写特定的JavaScript代码来处理...

    js复制插件-非常好用的一个复制插件

    标题中的"js复制插件"是指一个专门用于实现网页文本复制功能的JavaScript库或组件。这种插件通常通过简单的API调用来启用,使得开发者无需深入了解浏览器的剪贴板API,就能轻松地为用户提供复制到剪贴板的功能。描述...

    页面打开自动复制口令(不支持qq浏览器).zip

    在IT行业中,页面打开自动复制口令...综上所述,"页面打开自动复制口令"涉及到前端开发中的JavaScript事件处理、浏览器兼容性、剪贴板API使用、用户权限管理等多个知识点,开发者在实现时需兼顾功能的可用性和安全性。

    js excel 批量复制数据到 html(新)

    "js excel 批量复制数据到 html(新)"这个主题涉及到的是使用JavaScript技术将Excel文档中的数据高效地导入到HTML页面中,这对于数据分析展示、网页表单填充等场景非常实用。下面我们将详细探讨这一技术实现的关键...

    js页面事件大全,js页面事件大全

    ### JavaScript页面事件详解 #### 一、概述 JavaScript(简称JS)是一种广泛应用于网页开发中的脚本语言,它能够使网页具有动态交互功能。在Web开发中,掌握各种页面事件对于构建用户友好的应用程序至关重要。本文...

    js点击复制剪贴板鼠标点击文字弹出复制链接按钮

    在JavaScript(JS)中,实现点击文字后弹出复制链接按钮的功能涉及到多个技术点,包括事件监听、DOM操作以及浏览器的剪贴板API。以下是对这些知识点的详细讲解: 1. **事件监听**: 在JavaScript中,我们可以使用`...

    如何复制excel内容至web页面中

    Excel是一种桌面应用,主要用于处理表格数据,而Web页面则是基于浏览器的应用,通常用HTML、CSS和JavaScript构建。要将Excel内容复制到Web页面,主要分为两个步骤:数据提取和数据展示。 1. **数据提取**:从Excel...

    javascript页面代码防止frame禁止右键

    ### JavaScript 页面代码防止 Frame 禁止右键详解 在网页开发中,有时为了保护网站内容不被轻易复制或防止网站被嵌入到其他站点的框架(frame)中,开发者会采用一系列技术手段来实现这一目标。下面我们将详细介绍...

    JS点击复制剪贴板鼠标点击文字弹出复制链接按钮

    总的来说,实现"JS点击复制剪贴板鼠标点击文字弹出复制链接按钮"的功能需要结合JavaScript、DOM操作、事件监听和浏览器剪贴板API,通过合理的编程逻辑和良好的交互设计,为用户提供便捷的复制链接体验。在实际项目中...

    excel复制数据,粘贴到页面表格插件.zip

    `test.html`是主页面,`jquery.min.js`是jQuery库的压缩版,它是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和Ajax交互等任务。`tableCJ`可能是实现此功能的自定义JavaScript代码,可能包含了对Excel数据...

    手机移动端 js复制粘贴.zip

    在移动设备上,JavaScript(简称JS)经常被用于实现各种用户交互功能,其中包括复制和粘贴文本。在“手机移动端 js复制粘贴.zip”压缩包中,提供的资源可以帮助开发者实现这个功能,尤其对于那些需要在触摸屏设备上...

    js加载pdf禁掉复制下载显示

    在标题和描述中提到的问题是关于如何使用PDF.js来加载PDF文件,并且限制用户复制和下载PDF内容。下面我们将详细探讨如何实现这一目标以及相关技术点。 首先,为了加载PDF文件,我们需要在HTML页面中引入PDF.js库。...

    用JS实现右键的复制,拈帖和剪切功能

    ### 使用JavaScript实现右键的复制、粘贴和剪切功能 #### 一、背景介绍 在Web开发过程中,有时我们需要模拟浏览器自带的右键菜单中的复制(Copy)、粘贴(Paste)以及剪切(Cut)功能。这不仅能够增强用户体验,还...

Global site tag (gtag.js) - Google Analytics