2013-09-26 280 views
2

只注意到它的作品,当我禁用CSS 任何人都可以解释为什么?使用按钮点击复制文本与零剪贴板

我正在使用零剪贴板将文本框的值复制到剪贴板。

我可以使它在普通的HTML页面上工作,但是当我在aspx页面上应用相同的代码时,它不能按预期工作。

让我先解释一下如何在普通的html页面上工作。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Locker.test" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
    <asp:Button ID="Button1" runat="server" Text="Button" />  
    </form> 

      <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script> 
      <script type="text/javascript" src="Scripts/jquery.zclip.js"></script> 
      <script type="text/javascript" src="Scripts/jquery.zclip.min.js"></script> 
       <script> 
        $(document).ready(function() { 
         $('#<%=Button1.ClientID%>').zclip({ 
          path: 'ZeroClipboard.swf', 
          copy: function() { return $('#<%=TextBox1.ClientID%>').val(); } 
         }); 
        }); 
       </script> 
</body> 
</html> 

它将无论在文本框中键入的任何内容复制到剪贴板。

当我右键单击按钮,我可以看到它连接到Zeroclipboard闪光灯。 enter image description here

现在,如果我实现了链接到母版页这是行不通的aspx页面上相同,

我觉得zerocliboard未初始化。

当我右键点击按钮,我看到不同。 (必须是上面来完成这项工作。)

enter image description here

aspx页面上的代码如下:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="searchResult.aspx.cs" Inherits="Locker.searchResult" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
    <style type="text/css"> 
     .auto-style1 { 
      color: #FFFFFF; 
      font-size: large; 
     } 
     .auto-style2 { 
      color: #000000; 
     } 
     .auto-style3 { 
      color: #000000; 
      font-size: large; 
     } 
    </style> 
</asp:Content> 

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> 

     &nbsp;<p> 

     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong> <span class="auto-style3">Information</span><span class="auto-style1">&nbsp;&nbsp;&nbsp;</span></strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
     <div style="width:70%; margin: auto auto; text-align:left;"> 
      <asp:Panel ID="Panel1" runat="server"> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label4" runat="server" style="font-weight: 700; font-size: large" Text="Details for :" CssClass="auto-style2"></asp:Label> 
      <asp:Label ID="Label5" runat="server" style="font-weight: 700; font-size: large; color: #0000FF"></asp:Label> 
      <br /> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label1" runat="server" Font-Bold="False" style="font-weight: 700; font-size: large" Text="Password :" CssClass="auto-style2"></asp:Label> 
      &nbsp;<asp:TextBox ID="TextBox2" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox> 

       &nbsp; 

       <asp:Button ID="Button3" runat="server" Text="Button" />    
       <input type="text" id="test_description" value="hi" /> 

      <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script> 
      <script type="text/javascript" src="Scripts/jquery.zclip.js"></script> 
      <script type="text/javascript" src="Scripts/jquery.zclip.min.js"></script> 
       <script> 
       window.onload = $(document).ready(function() { 
         $('#<%=Button3.ClientID%>').zclip({ 
          path: 'ZeroClipboard.swf', 
          copy: window.onload = function() { return $('#<%=TextBox2.ClientID%>').val(); } 
         }); 
        }); 
       </script> 
      <br /> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; 
      <asp:Label ID="Label6" runat="server" style="font-weight: 700; font-size: large" Text="Description :" CssClass="auto-style2"></asp:Label> 
      &nbsp;<asp:TextBox ID="TextBox5" runat="server" BorderStyle="Solid" Enabled="False" Font-Size="Medium" Height="48px" TextMode="MultiLine" Width="213px"></asp:TextBox> 
      <br /> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <asp:Label ID="Label7" runat="server" style="font-weight: 700; font-size: small" Text="Last Editor was " CssClass="auto-style2"></asp:Label> 
      <asp:Label ID="Label8" runat="server" style="font-weight: 700; font-size: small" CssClass="auto-style2"></asp:Label> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Edit" Width="97px" /> 
      <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Update" Visible="False" Width="97px" /> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <asp:Label ID="Label12" runat="server" style="font-weight: 700; font-size: large; color: #0000FF" Visible="False"></asp:Label> 
      <br /> 
      <br /> 
      <br /> 
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp; 
    </asp:Panel> 

     </div> 
</asp:Content> 

有谁知道问题是什么,这可怎么解决?

从HTML页面检查结果 enter image description here

从普通页面 enter image description here

+0

只需检查ZeroClipboard.swf的路径或尝试将绝对网址用于测试。 –

+0

我认为你是对的,但我不确定为什么它没有加载到一个页面,而不是其他。通过上面的浏览器捕捉 –

+0

尝试为'path:'http:// localhost:port /.../ ZeroClipboard.swf',' –

回答

1

检查结果在你的输出寻找“从普通页面检查结果”,我可以看到,“TextBox2中”被禁用(而它应该被启用)并且它也具有应用于它的CSS类“aspNetDisabled”。这很可能是导致ZeroCopy工具失败的“aspNetDisabled”类,因为当您关闭CSS时,该功能将起作用。

注意“检查HTML页面结果”中的“TextBox1”未被禁用。

因此,要确保ASPX页面中的“TextBox2”已将“Enabled”设置为True,请执行此操作。

此外,请确保您使用Flash的浏览器上安装了Flash,因为ZeroClipboard使用“不可见的Adobe Flash影片”。

最后,删除“在window.onload”即代码更改为:

$(document).ready(function() { 
$('#<%=Button3.ClientID%>').zclip({ 
    path: 'ZeroClipboard.swf', 
    copy: function() { return $('#<%=TextBox2.ClientID%>').val(); } 
}); 
}); 

因为我不认为它会与ZeroClipboard库工作。

+0

尝试了您的建议,但它不起作用 –

+0

也在Internet Explorer中尝试过,但没有在其他浏览器上尝试过 –

+0

这可能是因为Flash在IE中已安装,但未在其他浏览器中安装。检查Flash是否安装在其他浏览器上(可以使用[this](https://www.adobe.com/software/flash/about/)链接)。 –