2013-07-02 21 views
6

Próbuję użyć Zero * Schowek * skopiować tekst z pole tekstowe do Schowek gdy klient kliknie przycisk. Próbuję tego przez wiele dni, ale bez powodzenia, żeby to zadziałało.Kopiowanie tekstu do schowka za pomocą Zero Schowek w ASP.NET

W scenariuszu mam jedno pole Textbox, które renderuje dane z bazy danych . Mam jeden przycisk Przycisk, który po kliknięciu przez klienta powinien skopiować tekst z pola Textbox. Próbowałem podążać, ale nie działa.

Pewna pomoc zostanie doceniona.

<script type="text/javascript" src="/Scripts/ZeroClipboard.js"></script> 
    <script type="text/javascript"> 
     ZeroClipboard.setMoviePath('/Scripts/ZeroClipboard.swf'); 
    </script> 



<script> 
    function test() { 

     ZeroClipboard.setMoviePath('/Scripts/ZeroClipboard.swf'); 
     //create client 
     var clip = new ZeroClipboard.Client(); 

     //event 
     clip.addEventListener('mousedown', function() { 
      clip.setText(document.getElementById('TextBox2').value); 

     }); 
     clip.addEventListener('complete', function (client, text) { 
      alert('copied: ' + text); 

     }); 
     //glue it to the button 
     clip.glue('d_clip_button'); 

    } 
</script> 

<asp:TextBox ID="TextBox2" runat="server" BorderStyle="None" Enabled="False" Font-Size="Medium" ForeColor="Black" Width="213px"></asp:TextBox> 
      &nbsp;<asp:Button ID="d_clip_button" runat="server" Text="Copy" OnClientClick="javascript:test();" /> 

Odpowiedz

3
<html> 
<body> 
     <script type="text/javascript" src="ZeroClipboard.js"></script> 

     <div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div> 

     <script language="JavaScript"> 
      var clip = new ZeroClipboard.Client(); 
      var myTextToCopy = "Hi, this is the text to copy!"; 
      clip.setText(myTextToCopy); 
      clip.glue('d_clip_button'); 
     </script> 
</body> 
</html> 
4
<html> 
<body> 
<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me."> 
Copy to Clipboard</button> 
<script src="ZeroClipboard.js"></script> 
<script src="main.js"></script> 
</body> 
</html> 

//In Main.js file 
// main.js 
var clip = new ZeroClipboard(document.getElementById("copy-button"), { 
moviePath: "/path/to/ZeroClipboard.swf" 
}); 

clip.on('load', function(client) { 
// alert("movie is loaded"); 
}); 

clip.on('complete', function(client, args) { 
this.style.display = 'none'; // "this" is the element that was clicked 
alert("Copied text to clipboard: " + args.text); 
}); 

clip.on('mouseover', function(client) { 
// alert("mouse over"); 
}); 

clip.on('mouseout', function(client) { 
// alert("mouse out"); 
}); 

clip.on('mousedown', function(client) { 

// alert("mouse down"); 
}); 

clip.on('mouseup', function(client) { 
// alert("mouse up"); 
}); 
+0

Możesz odwołać się do https://github.com/zeroclipboard/ZeroClipboard. – Rex

2

Przede wszystkim starasz się podnieść element, o niewłaściwym identyfikatorem. Ponieważ używasz webforms, poprawny sposób to:

getElementById('<%=TextBox2.ClientID%>') 

Również po js dyskretny styl dobre rozwiązanie może wyglądać tak: atrybut

$().ready(function() { 
    ZeroClipboard.setDefaults({ moviePath: "/Scripts/ZeroClipboard.swf" }); 

    var clip = new ZeroClipboard(document.getElementById('YourButtonId')); //or '<%=YourButton.ClientID%>' if you use asp.net button 

    clip.on('complete', function (client, args) { 
     alert("Copied text to clipboard: " + args.text); 
    }); 
}); 

Również Twój przycisk powinien mieć dane data-clipboard-target (faktycznie są tam trzy sposoby aby to zrobić). Ustawianie danych atrybuty do kontroli WebForms jest trudne, więc warto unikać tutaj przycisk asp.net i nie podoba:

<input type="button" value="clickme" id="YourButtonId" data-clipboard-target="<%=TextBox2.ClientID %>"/> 

Enjoy!

+0

Nadal nie mogę wykonać tej pracy. Czy możesz to zaimplementować w jsfiddle. –

+0

@AmritSharma Czy mógłbyś opublikować swój obecny kod? – Sergio