2013-07-02 18 views
6

Sto cercando di utilizzare Zero * Appunti * per copiare il testo da Casella di testo a Appunti quando il cliente fa clic su un pulsante . Ci sto provando da molti giorni ma non ho fortuna di farlo funzionare.Copiare il testo negli appunti utilizzando Zero Appunti in asp.net

Nello scenario, ho una casella di testo che rendono i dati dal database . Ho un pulsante che quando i clic del client devono copiare il testo della casella di testo . Ho provato a seguire ma non funziona.

Qualche aiuto sarà apprezzato.

<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();" /> 

risposta

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

È possibile fare riferimento a https://github.com/zeroclipboard/ZeroClipboard. – Rex

2

Prima di tutto, si sta cercando di raccogliere elementi da id sbagliato. Dal momento che si utilizza WebForms, modo corretto è:

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

Inoltre, secondo una buona soluzione di stile discreto js potrebbe essere simile: attribuiscono

$().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); 
    }); 
}); 

anche il pulsante dovrebbe avere dati data-clipboard-target (in realtà ci sei tre modi per farlo). Impostazione data-attributi per il controllo webforms è difficile, così si potrebbe desiderare di evitare di utilizzare il pulsante asp.net qui e fare così:

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

Enjoy!

+0

Non riesco ancora a farlo funzionare..Puoi realizzarlo in jsfiddle. –

+0

@AmritSharma potresti pubblicare il tuo codice attuale? – Sergio