ClipboardData实现复制内容到剪贴板，兼容各种浏览器

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="registAdd.aspx.cs" Inherits="registAdd" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

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

<title></title>

<link href="css/bootstrap.min.css" rel="stylesheet" />

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery-1.11.1.js"></script>

<script src="js/scripts.js"></script>

<script src="js/layer/layer.js"></script>

<script src="js/ZeroClipboard/ZeroClipboard.js"></script>

<style type="text/css">

.txt {

border: solid 1px #A3C8F5;

vertical-align: middle;

width: 240px;

height: 26px;

line-height: inherit;

}

.btns {

border: solid 1px #3F89D6;

vertical-align: middle;

width: 75px;

height: 24px;

line-height: inherit;

}

.btnCopy {

border: solid 1px #3F89D6;

vertical-align: middle;

width: 75px;

height: 24px;

line-height: inherit;

}

</style>

<script type="text/javascript">

//验证文本框

function txtTips(id, msg, guideInt) {

layer.tips(msg, $("#" + id), {

guide: guideInt,

time: 2,

style: [‘ color:#fff‘, ‘#FF0000‘],

maxWidth: 240

});

$("#" + id).focus();

}

function formatTips(id, msg) {

layer.tips(msg, $("#" + id), {

guide: 1,

time: 2,

style: [‘ color:#fff‘, ‘#FF0000‘],

maxWidth: 240

});

}

//文本框非空验证的方法

function txtCheck() {

var txtOperater = $("#txtOperater");             //操作员姓名

var txtOperatQQ = $("#txtOperatQQ");             //操作员QQ

var txtOperatPhone = $("#txtOperatPhone");       //操作员手机

var txtMachineCode = $("#txtMachineCode");       //机器码

var txtRegMachineDecr = $("#txtRegMachineDecr"); //注册电脑描述

var txtOtherExplan = $("#txtOtherExplan");       //其它说明

if (txtOperater.val() == "") {

txtTips("txtOperater", "请填写操作员姓名", 1);

return false;

}

if (txtOperatQQ.val() == "") {

txtTips("txtOperatQQ", "请填写操作员QQ", 1);

return false;

}

var regQQ = /[1-9][0-9]{4,9}/;

if (!regQQ.test(txtOperatQQ.val())) {

txtTips("txtOperatQQ", "请填写正确的QQ号", 1);

return false;

}

if (txtOperatPhone.val() == "") {

txtTips("txtOperatPhone", "请填写操作员手机", 1);

return false;

}

var regPhone = /1[3-8]+\d{9}/;

if (!regPhone.test(txtOperatPhone.val())) {

txtTips("txtOperatPhone", "请填写正确的手机号码", 1);

return false;

}

if (txtMachineCode.val() == "") {

txtTips("txtMachineCode", "请填写机器码", 1);

return false;

}

if (txtRegMachineDecr.val() == "") {

txtTips("txtRegMachineDecr", "请填写注册电脑描述", 1);

return false;

}

if (txtOtherExplan.val() == "") {

txtTips("txtOtherExplan", "请填写其它说明", 1);

return false;

}

}

//验证参数名称输入

function EnterVerifi(obj) {

var valTmp = $(obj);

var veriStr = /^[a-zA-Z]*$/g;

if (!veriStr.test(valTmp.val())) {

//valTmp.val("");

valTmp.focus();

inputTips(valTmp, "参数名称最好全是字母");

}

}

//添加成功后，选择操作

function CpoySuccessFn() {

$.layer({

shade: [0],

area: [‘auto‘, ‘auto‘],

dialog: {

msg: ‘复制成功，是否留在页？‘,

btns: 2,

type: 4,

btn: [‘好的‘, ‘不了‘],

yes: function () {

window.location.reload();

}, no: function () {

window.location.href = "registList.aspx";

}

}

});

}

function copyRegCode() {

clip.setText($("#txtRegistCode").val()); //设置需要复制的代码

}

function CopyInit() {

clip = new ZeroClipboard.Client(); //初始化对象

ZeroClipboard.setMoviePath("js/ZeroClipboard/ZeroClipboard.swf"); //设置flash

clip.setHandCursor(true); //设置手型

clip.addEventListener(‘mouseDown‘, function (client) {  //创建监听

copyRegCode();

});

clip.addEventListener(‘mouseUp‘, function (client) {

CpoySuccessFn();

});

clip.glue(‘btnCopyRegCode‘); //将flash覆盖至指定ID的DOM上

}

$(function () {

//layer.tips(‘填写完整信息后，请点我处理注册。‘, $("#btnRegist"), {

//    style: [‘ color:#fff‘, ‘#78BA32‘],

//    maxWidth: 140,

//    guide: 2,

//    time: 1000,

//    closeBtn: [0, true]

//});

//layer.msg(‘你已成功复制注册码到剪切板.‘, 3, {

//    rate: ‘top‘,

//    type: -1,

//    shade: false

//});

//验证操作员QQ格式

$("#txtOperatQQ").blur(function () {

var regQQ = /[1-9][0-9]{4,}/;

if (!regQQ.test($(this).val())) {

formatTips("txtOperatQQ", "请填写正确的QQ号", 1);

return false;

}

});

//操作员手机

$("#txtOperatPhone").blur(function () {

var regPhone = /1[3-8]+\d{9}/;

if (!regPhone.test($(this).val())) {

formatTips("txtOperatPhone", "请填写正确的手机号码", 1);

return false;

}

});

var addSuccess = $("#HidAddSuccess").val();

if (addSuccess == "1") {

CopyInit();

layer.tips(‘注册成功，点我！点我！！‘, $("#btnCopyRegCode"), {

style: [‘ color:#fff‘, ‘#FF0000‘],

maxWidth: 200,

guide: 0,

time: 1000,

closeBtn: [0, true]

});

}

});

</script>

</head>

<body>

<form id="form1" runat="server">

<asp:HiddenField ID="HidAddSuccess" Value="0" runat="server" />

<div class="container">

<div class="row clearfix">

<div class="col-md-12 column">

<div class="row clearfix">

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">

<%--      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle1</span>

<span class="icon-bar">Toggle2</span>

<span class="icon-bar">Toggle3</span>

<span class="icon-bar">Toggle4</span>

</button>--%>

<a class="navbar-brand" href="#"><strong>注册业务信息处理页面</strong></a>

</div>

</nav>

</div>

<div class="row clearfix">

<div class="list-group" contenteditable="false">

<a href="#" class="list-group-item active"><strong>注册业务信息添加</strong></a>

<div class="list-group-item">

<%--     <h4 class="list-group-item-heading"><strong>接口功能说明：</strong></h4>

<h4 class="list-group-item-heading"><strong>

<asp:TextBox ID="txtIDescription" Width="89%" Height="50" TextMode="MultiLine" runat="server"></asp:TextBox></strong></h4>--%>

<div class="list-group-item-text">

<%--      <blockquote contenteditable="false" class="clearfix" style="margin-bottom: 0px;">

<p>

<strong>接口地址：</strong>

</p>

<p>

<asp:TextBox ID="txtIURLAddress" Width="90%" TextMode="MultiLine" Height="80" runat="server"></asp:TextBox>

</p>

<small>参数说明：</small>

</blockquote>--%>

<table class="table clearfix" contenteditable="false">

<thead>

<tr>

<th width="20%"></th>

<th width="80%"></th>

</tr>

</thead>

<tr class="active">

<td style="text-align: right; vertical-align: middle;">

<b>注册软件类型：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:DropDownList ID="ddlSoftType" CssClass="txt" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlSoftType_SelectedIndexChanged"></asp:DropDownList>

</td>

</tr>

<tr class="warning">

<td style="text-align: right; vertical-align: middle;">

<b>选择或添加操作人员：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:DropDownList ID="ddlOperater" CssClass="txt" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlOperater_SelectedIndexChanged"></asp:DropDownList>

</td>

</tr>

<tr class="active">

<td style="text-align: right; vertical-align: middle;">

<b>操作员姓名：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:TextBox ID="txtOperater" CssClass="txt" runat="server"></asp:TextBox>

</td>

</tr>

<tr class="warning">

<td style="text-align: right; vertical-align: middle;">

<b>操作员QQ：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:TextBox ID="txtOperatQQ" CssClass="txt" runat="server" MaxLength="10"></asp:TextBox>

</td>

</tr>

<tr class="active">

<td style="text-align: right; vertical-align: middle;">

<b>操作员手机：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:TextBox ID="txtOperatPhone" CssClass="txt" runat="server" MaxLength="11"></asp:TextBox>

</td>

</tr>

<tr class="warning">

<td style="text-align: right; vertical-align: middle;">

<b>注册天数：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:DropDownList ID="ddlRegistDay" CssClass="txt" runat="server">

<asp:ListItem Text="30" Value="30" Selected="True"></asp:ListItem>

<asp:ListItem Text="60" Value="60"></asp:ListItem>

<asp:ListItem Text="90" Value="90"></asp:ListItem>

<asp:ListItem Text="90" Value="180"></asp:ListItem>

<asp:ListItem Text="365" Value="365"></asp:ListItem>

</asp:DropDownList>

</td>

</tr>

<tr class="active">

<td style="text-align: right; vertical-align: middle;">

<b>机器码：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:TextBox ID="txtMachineCode" CssClass="txt" runat="server"></asp:TextBox>

</td>

</tr>

<tr class="warning">

<td style="text-align: right; vertical-align: middle;">

<b>注册电脑描述：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:TextBox ID="txtRegMachineDecr" TextMode="MultiLine" CssClass="txt" Height="60px" runat="server"></asp:TextBox>

</td>

</tr>

<tr class="active">

<td style="text-align: right; vertical-align: middle;">

<b>其它说明：</b>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:TextBox ID="txtOtherExplan" TextMode="MultiLine" CssClass="txt" Height="50px" runat="server"></asp:TextBox>

</td>

</tr>

<tr class="error">

<td style="text-align: right; vertical-align: middle;"></td>

<td style="text-align: left; vertical-align: middle;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:Button ID="btnRegist" CssClass="btns" runat="server" Text="处理注册" OnClientClick="return txtCheck();" OnClick="btnRegist_Click" />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:Button ID="btnCancel" CssClass="btns" runat="server" Text="清空内容" OnClick="btnCancel_Click" />

</td>

</tr>

<tr id="registerTR" runat="server" visible="false" style="">

<td style="text-align: right; vertical-align: middle;">

<strong>注册码：</strong>

</td>

<td style="text-align: left; vertical-align: middle;">

<asp:TextBox ID="txtRegistCode" CssClass="txt" runat="server"></asp:TextBox>&nbsp; <input id="btnCopyRegCode" type="button" onclick="copyRegCode()" class="btnCopy" value="复制注册码" />

</td>

</tr>

</table>

<div class="panel-group" id="panel-704185">

<div class="panel panel-default">

<div class="panel-heading">

<a class="panel-title" data-toggle="collapse" data-parent="#panel-704185" href="#" contenteditable="false">

<strong>页面操作</strong>

</a>

</div>

<div id="panel-element-1" class="panel-collapse in" style="height: auto;">

<div class="panel-body" contenteditable="false" style="text-align: right">

<asp:Button ID="btnPostToList" CssClass="btns" Width="120px" runat="server" Text="返回列表页面" />

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

时间： 2024-10-01 06:38:33

ClipboardData实现复制内容到剪贴板，兼容各种浏览器的相关文章

Zclip复制页面内容到剪贴板兼容各浏览器

Zclip:复制页面内容到剪贴板兼容各浏览器 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,点击这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方,下面介绍一种使用Zclip实现的兼容主流浏览器的方式. 利用插件来写的话就比较简单,源码下载 <html> <head> <title>Index</title> <script src=

Zclip:复制页面内容到剪贴板兼容各浏览器

WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. 效果如下所示: 下面将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能,只说如何使用,不讲原理.其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡.而Zclip是利用一个隐藏的flash文件来完成复制的功

JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋

《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

将内容复制到剪切板兼容主流浏览器的解决方案

html : <body> <div class="demo-area"> <label for="copy-input">输入要复制到剪切板的文字:</label><br> <textarea id="copy-input" cols="30" rows="10"></textarea><br> <but

蚂蚁老码农——JavaScript复制内容到剪贴板

最近一个活动页面中有一个小需求,用户点击或者长按就可以复制内容到剪贴板,记录一下实现过程和遇到的坑.常见方法查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js原生方法:document.execCommand() 分别来看看这两种方法是如何使用的.clipboard.js这是clipboard的官网:clipboardjs.com/,看起来就是这么的简单.引用直接引用: <script src="dist/clipboard.min.js&quo

兼容各浏览器 复制内容到剪贴板

<script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../js/ZeroClipboard/ZeroClipboard.js"></script> <script type="text/ja

移动端实现复制内容至剪贴板

需求场景 使用document.execCommand()方法,以下简称为"命令API". 示例一 HTML部分 <input type="text" id="text_input" /> <button type="button" id="copy_text">copy</button> JavaScript部分 var inputElem = document.get

js复制内容到剪贴板格式化粘贴到excel中

<input id="Button1" type="button" value="导出EXCEL" onclick="copyToClipboard('ta')"> <div style="width: 760px;float:left;" id="ta"> <table border="0" style="" cel