您的位置：首页 > 编程技术 > html  >  复制内容到剪贴板

复制内容到剪贴板

 更新时间：2016年9月20日 19:02  点击：2115

我们通常会通过单击按钮的操作，将定义好的内容直接复制到剪贴板

对于用户来说点了按钮直接【Ctrl】+【V】就可以了。

其实该功能的核心原理就是用到了window子对象clipboardData的一个方法：setData()

其语法是：clipboardData.setData(sDataFormat, sData)

参数sDataFormat表示要复制的内容的格式；参数sData则要复制的内容。
返回值：复制成功返回true；失败返回false。

比如：

clipboardData.setData("text","www.czz5.com")
<a href="#" onclick=javascript:clipboardData.setData("text","www.czz5.com")>
单击当前链接文本表示复制了内容到本地剪贴板，只需在【Ctrl】+【V】就能显示出定义的内容
</a>

以上是定义了固定的值复制到本地剪贴板，可用在诸如“将本页转阅给朋友”类似的功能需求中，以达到快捷转达网址或信息的目的。

此外，我们还会遇到这样的一些情况：当我们在某网站复制了一段内容之后，在粘贴下来时，发现不自觉的多了一行信息，该信息即是由内容复制到剪贴板同时增加的一行信息。

也就是说我们写入到剪贴板中的值除了拷贝的选择内容外，还有自己定义的值，那么如何获得“拷贝的选择内容”，这就需要使用到 document.selection.createRange() 方法，其中该方法配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

<textarea cols=40 rows=10>
www.czz5.com 中国站长网
www.tangshanseo.cn 唐山SEO
www.xiaoduzi.com 健康减肥网
</textarea> <br>
<input type=button value="先选择文本框文本再单击本按钮" onclick=alert(document.selection.createRange().text)>
</form>

所以，应用了document.selection.createRange().text就能重新定义剪贴板中的值了。

选择复制本段文本，然后粘贴到文本编辑器中查看是不是多了一些附加信息。

<script type="text/javascript">
document.body.oncopy=function(){
 event.returnValue=false;
 var t=document.selection.createRange().text;
 var s="有关单击按钮将内容复制到剪贴板的原文内容地址： "+location.href;
 clipboardData.setData('Text',t+'rnrn'+s+'rn');
}
</script>

初学者对于设计模式肯定存在着很多不明白之处,今天刚好周末,就抽出来点时间写了一个单件模式结合命令链模式打造系统核心的文章,可能对于部分人来说,文章内容过于浅显,这是送给初学者的教程,因为时间比较紧(要陪老婆逛街,呵呵),其中出现了设计不规范的,代码书写不规范的,bug等等还望各路大侠指出来,方便大家共同进步.本人水平有限.^_^

相信大家都已经读过很多关于在php中应用设计模式的书籍或是文章,但是很少有直接给予实例,大部分看完之后有种迷迷糊糊的感觉,如果没有项目实践,很难将设计模式部分弄清楚.

为避免代码过于复杂.没有添加异常处理等内容.
单件模式以及命令链模式的基础知识,大家自己google一下.不详细讲了.下面直接看实例:

<?php
/*
*@author:NoAngels
*@time:08年08月30日
*/
interface IRunAction{
//获取类中定义的可以被APP中run的方法
static function LoadActions();
//类中的入口函数调用该类中其他函数用
function runAction($action, $args);
}
/*
*APP类系统的核心部分
*/
class APP{
static private $__instance = null;
static private $__commands = array();
static private $__flag = 1;
private function __construct(){}
//单件模式设计获取该类的唯一实例
static function Load(){
if(self::$__instance == null) self::$__instance = new APP;
return self::$__instance;
}
//添加命名到APP的$__instance中每次添加新命令的时候检查是否之前已经添加过一个该类的实例
//如果有就忽略操作如果没有就添加进来
public function addCommand($cmdName){
foreach(self::$__commands as $cmd){
if(strtolower(get_class($cmd)) == strtolower(get_class($cmdName))){
self::$__flag = 0;
break;
}
}
if(self::$__flag == 1) self::$__commands[] = $cmdName;
self::$__flag = 1;
}
//命令链模式设计的核心部分调用实例的入口函数
//首先检查是否在类中允许调用该操作如果没有就提示未定义操作退出
public function runCommand($action, $args){
self::$__flag = 0;
foreach(self::$__commands as $cmd){
if(in_array($action, $cmd->LoadActions())){
self::$__flag = 1;
$cmd->runAction($action, $args);
}
}
if(self::$__flag == 0){
self::$__flag = 1;
exit("undefined action by action : $action");
}
}
//删除某个类的实例,只要指定类的名字即可
public function removeCommand($className){
foreach(self::$__commands as $key=>$cmd){
if(strtolower(get_class($cmd)) == strtolower($className)){
unset(self::$__commands[$key]);
}
}
}
//供大家测试用看看是否添加以及删除成功
public function viewCommands(){
echo(count(self::$__commands));
}
}
//类User实现接口IRunAction
class User implements IRunAction{
//定义可以调用的操作
static private $__actions = array('addUser', 'modifyUser', 'removeUser');
//获取可以调用的操作,实际过程中不要直接就爱你个$__actions设计成public调用
//而应该设计一个LoadActions函数获取$__actions的值
static public function LoadActions(){
return self::$__actions;
}
//运行指定函数
public function runAction($action, $args){
//不明白这个函数使用的可以参看手册
call_user_func(array($this,$action), $args);
}
//测试函数而已
protected function addUser($name){
echo($name);
}
}
//类Test同类User
class Test implements IRunAction{
static private $__actions = array('addTest', 'modifyTest', 'removeTest');
static public function LoadActions(){
return self::$__actions;
}
public function runAction($action, $args){
call_user_func(array($this,$action), $args);
}
protected function addTest($name){
echo($name);
}
}
//以下是测试代码
APP::Load()->addCommand(new User);
APP::Load()->addCommand(new User);
APP::Load()->addCommand(new User);
APP::Load()->addCommand(new User);
APP::Load()->runCommand('addUser', 'NoAngels');
APP::Load()->addCommand(new Test);
APP::Load()->runCommand('addTest', null);

APP类用单件模式设计,它是系统的核心部分.相信大家看代码就知道了Load方法是载入APP类实例,相当于有些书籍中的getInstance静态方法.他有addCommand,runCommand,removeCommand三个public方法.runCommand是核心部分.同时也是命令链模式的核心启动程序.具体实现请看源代码.代码写的已经很清楚了,就此不再赘述.
类User,Test实现了接口IRunAction,这两个类中都定义了一个静态私有变量$__actions,为一数组,其中包含了可以被APP的runCommand函数调用的操作.

下面是系统的运行流程:

APP启动
-------addCommand,将将要运行的操作所属的类添加到APP中.如果添加的类是用单件模式设计的.可以如下添加addCommand(SingletonClass::Load()).否则可以如下调

addCommand(new someClass)
-------runCommand.运行操作.比如在User类中有一操作addUser.我直接可以启用runCommand($acttion, $args).在APP中循环遍历$__commands数组,如果其中某个类的实例拥有该操作,就调用该实例的runAction函数.如果你没有将某个类的实例利用addCommand添加进来,就提示未定义操作,退出.
在类User和类Test中的runAction调用了call_user_func这个非常使用的函数.调用该类中对应函数.

提示:讲解与实例部分就到此了,具体你怎么理解,以及如何将该思想利用,就看你自己的理解,凡事必须自己动手才行.(ps:可以做成框架中的单一入口文件,实不实现MVC就看你自己是怎么想的了.)

js控制显示与隐藏代码,很简单我们就用到style.display 的显示与隐藏 block,none下面我们来看个实例.
<script>
function show(obj) {
 document.getElementById(obj).style.display = "block"
}
function hide(obj) {
 document.getElementById(obj).style.display = "none"
}
</script>

<h3><span>内容</span><a href="javascript:void(0);" onmouseover="show('count');" onmouseout="hide('count')">指上看看</a></h3>

 <div id="count" style="display:none;">
     <h4>退款说明</h4>
        <p>特惠套餐退款金额 = （套餐费用 － 域名费用） × （申请天数 － 已使用天数） / 申请天数</p>
        <p>虚拟主机退款金额 = 虚拟主机费用 × （申请天数 － 已使用天数） / 申请天数</p>
</div>

js禁止右击与选择内容

<script>
function onKeyDown()
{
 if ((event.keyCode==116)||(window.event.ctrlKey)||(window.event.shiftKey)||(event.keyCode==122))
 {
 event.keyCode=0;
 event.returnValue=false;
 }
}
</script>

<script>
function yxl() {
if(window.event.altKey)
{
window.event.returnValue=false;
}
}
document.onkeydown=yxl
</script>
<body onkeydown="onKeyDown()" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

原创:转请注明www.111cn.net

　thead 标签  表示HTML表头
　　表格的头部thead，可以使用单独的样式定义表头，并且在打印时可以在分页的上部打印表头。

　　tbody 标签  表示HTML表体
　　浏览器显示表格时，通常是完全下载表格后，再全部显示，所以当表格很长时，可以使用tbody分段显示。

　　scope 属性  定义了行或列的表头
　　scope可以定义行或列的表头
　　取值
　　col - 定义列表头
　　row - 定义行表头
　　colgroup - 定义列组的表头信息,是column group的缩写
　　rowgroup - 定义行组的表头信息,是row group的缩写

　　summary 属性  代表HTML表格的摘要
　　表格不仅可以有标题caption，还可以有一个摘要说明summary。摘要是不会显示出来的，通常是给一些其它的工具使用的，比如盲人阅读器等。
　　关于caption和th标签可以参考下面的文章。
　　CSS网页布局实例：以合适的标签创建具有语义的表格
　　http://www./article.asp?id=720
　　由于摘要summary不会显示在浏览器中，所以可以尽可能的使摘要描述足够长，这样更有利于那些通过“听”的浏览者了解你的table表格。

看下面的HTML代码：

 
<table id="MrJin_a" summary="关于www.52css.ocm网站的一些数据">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">IP</th>
            <th scope="col">PV</th>
            <th scope="col">RANK</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 网站首页</td>
            <td>5000</td>
            <td>47800</td>
            <td>A</td>
        </tr>
        <tr>
            <td>DivCSS教程</td>
            <td>4500</td>
            <td>42000</td>
            <td>A-</td>
        </tr>
        <tr>
            <td>CSS布局实例</td>
            <td>4900</td>
            <td>46300</td>
            <td>A+</td>
        </tr>
        <tr>
            <td>CSS2.0教程</td>
            <td>4200</td>
            <td>41800</td>
            <td>A+</td>
        </tr>
    </tbody>
</table>
　　HTML代码中没有任何表现的部分，不设置边距，定义表格边线，色彩等。所有表现的内容都分离到CSS里去。
　　本文作者： 如需转载请建立本站链接（http://www./），并且不得随意改动文章内容、保留此版权声明文本！

　　看下面的CSS代码：

 
body
{
    line-height: 20px;
}

#MrJin_a
{
    font-size: 12px;
    background: #fff;
    margin: 45px;
    width: 480px;
    border-collapse: collapse;
    text-align: left;
}
#MrJin_a th
{
    font-size: 14px;
    font-weight: normal;
    color: #039;
    padding: 10px 8px;
    border-bottom: 2px solid #6678b1;
}
#MrJin_a td
{
    color: #666;
    padding: 9px 8px 0px 8px;
}
#MrJin_a tbody tr:hover td
{
    color: #03c;
}

[!--infotagslink--]

相关文章

  • MySQL快速复制数据库数据表的方法

    某些时候，例如为了搭建一个测试环境，或者克隆一个网站，需要复制一个已存在的mysql数据库。使用以下方法，可以非常简单地实现。假设已经存在的数据库名字叫db1，想要复制一份，命名为newdb。步骤如下：1. 首先创建新的数据库newd...2015-10-21

  • C# 复制与删除文件的实现方法

    这篇文章主要介绍了C# 复制与删除文件的实现方法的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下...2020-06-25

  • JavaScript深度复制（deep clone）的实现方法

    本文给大家介绍JavaScript深度复制（deep clone）的实现方法，涉及到js深度复制相关知识，本文介绍的非常详细，特此分享脚本之家平台供大家参考...2016-02-21

  • percona-toolkit对MySQL的复制和监控类操作教程

    复制类工具 1. pt-heartbeat 功能介绍： 监控mysql复制延迟 用法介绍： pt-heartbeat [OPTION...] [DSN] --update|--monitor|--check|--stop 测量复制落后主mysql或者主PostgreSQL多少时间，你可以使用这个脚本去更新主或...2015-11-24

  • PowerShell读取文件内容、替换文件内容、读取限定行的例子

    这篇文章主要介绍了PowerShell读取文件内容、替换文件内容、读取限定行的例子,本文使用3个例子来说明实现这3个需求的操作技巧,需要的朋友可以参考下...2020-06-30

  • C#中数组初始化与数组元素复制的方法

    这篇文章主要介绍了C#中数组初始化与数组元素复制的方法,涉及C#中数组的创建、初始化及使用Array.Copy方法复制数组元素的技巧,需要的朋友可以参考下...2020-06-25

  • mysql(master/slave)主从复制原理及配置图文详解

    这篇文章主要介绍了mysql(masterslave)主从复制原理及配置图文详解,以前脚本之家小编发过相关的内容，但这么好的非常少见特分享一下,需要的朋友可以参考下...2016-06-12

  • step by step配置mysql复制的具体方法

    采用全库复制的方案，方便管理mysql 5.5 + rhel5.810.4.11.12 master10.4.11.13 slave---Master端设置1， 创建复制帐号，需要复制和slave权限mysql> GRANT REPLICATION SLAVE, REPLICATION CLIENT ON *.* TO repl@'10....2013-10-04

  • js实现复制粘贴的两种方法

    这篇文章主要为大家详细介绍了js实现的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-12-04

  • shell脚本批量复制及执行命令的示例详解

    这篇文章主要介绍了批量复制及执行命令shell脚本，本文通过列举几个示例给大家详细介绍，对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11

  • 代码块高亮可复制显示js插件highlight.js+clipboard.js整合

    最近有个需求是将jsp页面上的某一段代码块格式化成类似CSDN的代码块的样式，而且很多平台都使用了这样的功能，下面就为大家简单分享一下...2021-02-17

  • 实例解析jQuery中如何取消后续执行内容

    本文主要介绍了jQuery中取消后续执行内容的实例，代码通俗易懂。需要的朋友来看下吧...2016-12-02

  • js innerHTML 改变div内容

    在做ajax无刷新时,我想很多朋友都会知道js innerHTML来更改 div 或table里面的值哦. JavaScript的innerHTML 永远不知道你可以改变的内容，一个HTML元素？也许你要...2016-09-20

  • js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）

    这篇文章主要介绍了js实现点击复制当前文本到剪贴板功能，兼容所有浏览器，感兴趣的小伙伴们可以参考一下...2015-12-24

  • JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

    多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言，当鼠标点击此文本框的时候能够将里面的默认文本清除，当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框...2016-01-14

  • 浅谈C#各种数组直接的数据复制/转换

    下面小编就为大家带来一篇浅谈C#各种数组直接的数据复制/转换。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • C语言文件复制实例详解

    这篇文章主要介绍了C语言文件复制实例详解的相关资料,需要的朋友可以参考下...2020-04-25

  • php更新修改excel中的内容例子

    本例子不是读取Excel或生成新的Excel，而是读取现有的Excel文件，然后修改Excel中的数据,就像修改mysql中数据一样的哦。 代码如下 ...2016-11-25

  • 深入理解JavaScript中的对象复制(Object Clone)

    下面小编就为大家带来一篇深入理解JavaScript中的对象复制(Object Clone)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20

  • 安卓7.1.1更新内容大全

    本文主要讲了安卓7.1.1系统更新的主要内容，有兴趣的朋友快来看一看吧！ 虽然你的Android设备可能还都没吃上棉花糖，但谷歌可是已经发布了最新的Android 7.1.1，如果是N...2016-12-15