zoukankan      html  css  js  c++  java
  • js 实现复制粘贴功能

    <!DOCTYPE html>
    <!-- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> -->
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    	<title>ZeroClipboard(复制功能)</title>
    </head>
    <body>
    	<label for="cardid">卡号:</label>
    	<input type="text" name="cardid" id="cardid" value="123456789" readonly="readonly" />
    	<button id="copycardid">点击复制卡号</button>
    </body>
    </html>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="ZeroClipboard.js"></script>
    <script type="text/javascript">
    $(function(){
    	init();
    });
    function init() {
    	// ZeroClipboard.setMoviePath( "ZeroClipboard.swf" ); 
    	var clip = new ZeroClipboard.Client(); // 新建一个对象
    	clip.setHandCursor( true );
    	clip.setText($('#cardid').val()); // 设置要复制的文本。
    	clip.addEventListener( "mouseUp", function(client) {
    		alert("复制卡号成功!");
    	});
    	// 注册一个 button,参数为 id。点击这个 button 就会复制。
    	//这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
    	clip.glue("copycardid"); // 和上一句位置不可调换
    }
    </script>
    

    需要引入 ZeroClipboard.js 和 ZeroClipboard.swf,同时网站处于发布状态或者在本地有搭建好的服务器,单纯的运行页面是无法使用的。

  • 相关阅读:
    二叉树相关题目
    二叉树的遍历
    mysql获取某个表中除了某个字段名外的所有字段名
    设计模式之原型模式
    设计模式之工厂方法模式
    设计模式之代理模式
    设计模式之装饰模式
    设计模式之策略模式
    设计模式之简单工厂模式
    Redis的使用及参考代码
  • 原文地址:https://www.cnblogs.com/2014-cjs/p/4742253.html
Copyright © 2011-2022 走看看