`

js实现复制一段文字的功能

阅读更多

看到技术博客时候,看到代码下面按钮可供用户选择复制的;之前遇到过手机界面说“喜欢,复制下来吧!”

比如:http://www.jb51.net/article/22854.htm 上面就有该功能,网上的一些博客技术等在本地运行都是有问题的:google和firefox浏览器是不支持自动复制,IE6支持(其他浏览器没测试过);

解决问题的思路是:查看页面源代码,复制到本地运行(利用里面的js源码等资源),删除多余代码,多调试测试!

我们查看它的源代码后复制到我们本地index.html

里面的function.js和foot.js也同样复制到同级目录下然后我们删除多余代码

我整理后index.html的代码:

<!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" xml:lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="description" content="ExtJS与PHP、MySQL实现存储的方法,需要的朋友可以参考下,里面有详细的步骤。" />

<script type="text/javascript" src="function.js"></script>

</head>

<body>

<div id="art_content">

<P><div class="codetitle"><span>

<a style="CURSOR: pointer" data="95072" class="copybut" id="copybut95072" onclick="doCopy('code95072')">

<U>复制代码</U></a></span><br/> 

</div>

代码如下:

<div class="codebody" id="code95072"> 

<BR>Ext.Ajax.request({ <BR>url: <BR>success: <BR>method: <BR>failure: <BR>params111: <br><br>}); <BR>

</div> </P>

<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="foot.js"></script>

</body>

</html>

function.js和foot.js代码我就放在下面的附件里面;直接上图哈:

 // 效果图:




 // 样式没调整功能实现了,上面的code后的数字可以更改的只要保持一致就行(如果更改请在function.js里doCopy函数也要更改的哟);可以粘贴;我们应该活用网上资源为我所用然后再服务大家,下面是源码,直接运行就行!如有问题请大家多多指教!

 

  • 大小: 37.7 KB
  • 大小: 15.8 KB
分享到:
评论

相关推荐

    纯js实现复制文本并提示复制成功(干货)适用所有浏览器

    总结一下,通过以上步骤,我们可以利用纯JavaScript实现一个适用于所有浏览器的文本复制功能,并在复制成功后给予用户友好的提示。这个功能对于提升用户体验来说非常有用,尤其在代码分享或需要用户快速复制内容的...

    ZeroClipboard.js实现js复制功能

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

    实现复制页面文字自动添加本页网址的例子。

    当用户在网页上选中一段文字并执行复制操作时,通常会得到选中文本的纯文本内容。而这个功能的目标是,在用户复制文本的同时,将当前页面的URL也一并添加到剪贴板中。这样,当用户在其他地方粘贴这段文字时,会附带...

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

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

    Js实现滚动变色的文字效果

    要实现滚动变色的文字效果,需要通过JavaScript来动态地改变页面上文字的颜色。实现该效果通常涉及HTML、CSS和JavaScript的基础知识。在这个示例中,我们将具体分析如何通过JavaScript脚本来实现文字的颜色交替变化...

    js网页禁右键、复制、选择文字

    JavaScript是一种轻量级的解释型编程语言,广泛应用于Web页面,用于实现客户端的动态效果和交互功能。它可以通过DOM(Document Object Model)操作网页元素,改变HTML和CSS,实现对网页的控制。 **禁用右键点击** ...

    教你复制不能复制的网页文字

    这些保护手段通常是通过 JavaScript 语言实现的,禁止用户复制或剪切网页中的文字和图片。但是,有时候我们确实需要复制这些内容供自己参考或使用。那该怎么办呢?下面我们将介绍多种方法来突破这些限制,实现复制不...

    js兼容chrome、firefox复制、粘贴

    在JavaScript编程中,实现跨浏览器的复制和粘贴功能是一个常见的需求,特别是在Web应用中提供类似桌面应用的用户体验时。本篇文章将详细讲解如何利用JavaScript兼容Chrome和Firefox这两种主流浏览器,实现复制和粘贴...

    js复制文本(兼容IE、火狐)

    "js复制文本(兼容IE、火狐)"这个主题主要关注如何利用JavaScript实现文本复制功能,并确保这个功能在不同浏览器,包括Internet Explorer(IE)和Mozilla Firefox等主流浏览器上都能正常工作。在Web开发中,浏览器...

    【JavaScript源代码】为网站代码块pre标签增加一个复制代码按钮代码.docx

    复制成功后,更新按钮的文字提示,并在一段时间后恢复原始文字。 ```javascript $(function() { let preList = $(".content pre"); for (let pre of preList) { let btn = $("(this)'&gt;复制代码&lt;/span&gt;"); btn....

    复制链接,文字代码

    标题中的“复制链接,文字代码”暗示了我们讨论的核心是关于如何复制链接和代码段,这在日常的网络使用和编程工作中非常常见。链接可能是网页地址、资源下载地址或者API接口,而代码则是编程时必不可少的部分。在...

    禁止复制网页指定区域的文字.rar

    标题中的“禁止复制网页指定区域的文字.rar”表明这个压缩包包含了一个HTML文件,该文件可能是一种防止用户直接复制网页上特定区域文字的技术实现。在网页设计中,有时开发者或网站所有者希望保护他们的内容不被随意...

    教你复制那些复制不了的网页文字

    当前很多网页制做者都不想让自己网页中的内容直接就让人给复制去,有的是为了版权、有的是为了让人再回来看这段文字,提高他的访问量等等。他们一般会在网页代码中加入以下一个或多个代码: onpaste="return false...

    复制剪贴板功能

    例如,可以这样配置一个按钮来复制一段文本: ```html 复制 &lt;script src="path/to/ZeroClipboard.js"&gt; var client = new ZeroClipboard(document.getElementById("my_clipboard_button")); client.on("ready", ...

    复制文字跳转微信

    标题“复制文字跳转微信”所涉及的知识点主要集中在移动端应用开发中的一种特定交互功能,即用户通过点击操作实现文本的复制,并能直接跳转到微信应用程序。这种功能常见于移动网页或者混合应用(Hybrid App)开发中...

    如何在一段文字里点一下就可以在里面插入一段文字?

    要实现在一段文字中单击就能插入一段文字,我们需要了解一些前端开发的基础知识。首先,要使用JavaScript(特别是DOM操作)和HTML。这里可以利用JavaScript的鼠标事件监听功能来捕捉用户的单击行为,并在相应的坐标...

    如何复制被锁定的网页文字

    本文将详细介绍一种简单有效的方法来解除这种限制,帮助大家实现网页文字的自由复制。 #### 方法概述 通过创建一个特殊的IE浏览器书签(快捷方式),可以绕过大部分网页对文本复制功能的锁定。这种方法的核心在于...

    JS实现排行榜文字向上滚动轮播效果

    标签中的“js排行榜文字向上滚动轮播”、“js文字向上滚动”和“js文字滚动轮播”进一步明确了这个话题的核心,即使用JavaScript来实现文字的向上滚动轮播功能。 以下是对这段代码的详细解析: 1. HTML结构: ...

    JavaScript实现复制内容到粘贴板代码

    这对于改善用户的交互体验非常有帮助,比如在填写表单时快速将用户名复制到密码字段中,或者在分享信息时复制一段文字等。在实际项目中,我们应根据浏览器的支持情况和项目需求,选择最佳的实现方案。

Global site tag (gtag.js) - Google Analytics