ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)

在这节，我们将看到如何把多行文本框的内容复制到剪贴板上。
注意：jQuery clipboard plugin 只支持IE

界面代码：


代码如下:

<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 300px;">
<p>请输入你的评论：</p>
<asp:TextBox ID="txtComment" TextMode="MultiLine" Rows="5" Width="300px" Height="200px"
runat="server"></asp:TextBox>
<br />
<asp:HyperLink ID="lnkHighlight" Text="点击复制评论" runat="server"></asp:HyperLink>
</fieldset>
</div>
</form>

显示界面：

脚本部分：


代码如下:

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery.clipboard.js" type="text/javascript"></script>
<style type="text/css">
a
{
color: #0000FF;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$.clipboardReady(function () {
$("a").click(function () {
$("#<%=txtComment.ClientID %>").select();
$.clipboard($("#<%=txtComment.ClientID %>").val());
});
});
});
</script>

加入脚本后点击复制按钮显示效果如下：

打开记事本按Ctrl+V:

哈哈成功了，就这么简单。
插件下载地址：http://plugins.jquery.com/project/clipboard
另外有一个Zero clipboard 插件支持跨浏览器，它是通过一个flash文件和JavaScirpt接口实现的，想了解更多信息，请访问http://code.google.com/p/zeroclipboard/

赞 (0)

相关推荐

  • 无需 Flash 使用 jQuery 复制文字到剪贴板

    无需 Flash 使用 jQuery 复制文字到剪贴板

    如果在网上找一个关于如何将一段特定的文本拷贝到剪贴板的解决方案,最可能的结果就是使用Flash的方案来做这个事,虽然使用Flash可以很好地解决这个问题,但是这不是一个明智的想法,因为这个产品最终会消失或者至少是浏览器不再提供支持,因此这个解决方案是没有未来的.虽然可以使用jQuery或者纯JavaScript,甚至完全自己写,但是当有人已经创建了一个解决方案,那么为什么还要重复发明轮子呢?让我们一起看看Clipboard.js吧. Clipboard.js删除了Flash组件并且优雅地解决了这

  • JQuery zClip插件实现复制页面内容到剪贴板

    JQuery zClip插件实现复制页面内容到剪贴板

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 最终效果: 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是用的透明flash遮挡"复制到剪贴板"按钮,所以当你点击"复制到剪贴板"的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板. 加载JQuery库和zclip插件 <scri

  • 基于jquery的复制网页内容到WORD的实现代码

    复制代码 代码如下: $('#eTableWord').click( function() { var oWD = new ActiveXObject("Word.Application"); var oDC = oWD.Documents.Add("", 0, 1); var oRange = oDC.Range(0, 1); var sel = document.body.createTextRange(); sel.moveToElementText(data

  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HTML 首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载. <script type="text/javascript" src="js/jquery.js"></script&

  • jQuery获取剪贴板内容的方法

    本文实例讲述了jQuery获取剪贴板内容的方法.分享给大家供大家参考,具体如下: 这两天弄fckeditor粘贴功能,随着工作的深入和在网上查询资料,知道了在网页中一般是不允许访问"剪贴板"的,因为这样存在着很大的安全隐患,我自己也尝试着写了一个简单的demo 在IE和FF中剪贴板的访问是可控的,但是在Opera.Chrome.Safari浏览器中是不允许访问的,这样就产生了浏览器兼容的问题,怎么样才能让其他的浏览器兼容这个功能呢,在网上查找了一些资料--"使用flash去访

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • jQuery简单实现点击文本框复制内容到剪贴板上的方法

    本文实例讲述了jQuery简单实现点击文本框复制内容到剪贴板上的方法.分享给大家供大家参考,具体如下: //点击文本框复制其内容到剪贴板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); alert("已经成功复制到剪帖板上!"); } e

  • jQuery:节点(插入,复制,替换,删除)操作

    复制代码 代码如下: <html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js&q

  • 深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

    我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri

  • ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)

    ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)

    在这节,我们将看到如何把多行文本框的内容复制到剪贴板上. 注意:jQuery clipboard plugin 只支持IE 界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; height: 300px;"> <p>请输入你的评论

  • ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)

    ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)

    当用户要输入一些密码.信用卡信息和银行账号等敏感信息,用户更希望手工通过键盘敲入数据,而好过通过剪贴板复制粘贴. 我们先来看下实现后的效果: 输入新密码 复制新密码出现如下对话框 界面代码 复制代码 代码如下: <body> <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; h

  • ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)

    ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)

    当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. 当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示. 为了实现上面的需求,代码如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe1.aspx.cs" Inherits="Recipe1" %> <!DOCTYPE html PUB

  • ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)

    ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)

    通过下面的代码可以实现这种切换的效果. 首先我们来看界面: 界面代码: 复制代码 代码如下: <body> <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; height: 200px;"> <table cellpadding="3"

  • ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter

    ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter

    •可限制最大输入字符长度 •可设置字符截取速度 •可自定义提示信息文本样式(可以改进自定义文本内容) 该插件统计英文字符和中文的长度是一样的. 废话少说,这里直接奉上详细插件代码,具体实现细节已经在代码里面有注释: 复制代码 代码如下: ; (function ($) { $.fn.extend({ textAreaCount: function (options) { var $textArea = this; options = $.extend({ maxlength: 140, // 定

  • ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息.该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定的值,还可以根据用户自定义业务规则,而且错误提示信息,也可以根据用户的要求自定义显示.看来这个插件的功能确实很强大,是不是迫不及待想使用了.好的,那我们就开始简介如何使用它. jQuery validation 插件下载地址:http://plugins.jquery.com/p

  • ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能

    ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能

    页面样式代码: 复制代码 代码如下: <style type="text/css"> .header { background-color: #CCCCCC; color: White; font-size: x-large; } .content { background-color: White; font-weight: lighter; font-size: small; } .content td { text-align: left; } .mandatory

  • ASP.NET jQuery 实例10 动态修改hyperlink的URL值

    ASP.NET jQuery 实例10 动态修改hyperlink的URL值

    1.先准备界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="left"> <fieldset style="width: 300px; height: 200px;"> <table cellpadding="0" cellspacing="0" border="

  • ASP.NET jQuery 实例8 (动态添加内容到DropDownList)

    ASP.NET jQuery 实例8 (动态添加内容到DropDownList)

    首先准备好页面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="left"> <fieldset style="width: 350px; height: 150px"> <p> 选择颜色</p> <table cellpadding="0" cellspacing=&qu

  • ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList

    ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList

    先看界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="3

随机推荐