c# - Copie texto al portapapeles usando Zero Clipboard en asp.net
web-applications copy (3)
Intento usar Zero * Clipboard * para copiar texto de Textbox en el Portapapeles cuando el cliente hace clic en un Botón . Lo intento durante muchos días, pero no tuve suerte para que esto funcione.
En el escenario, tengo un cuadro de texto que representa datos de la base de datos . Tengo un botón que cuando el cliente hace clic debe copiar el texto del cuadro de texto . He intentado seguir pero no funciona.
Alguna ayuda será apreciada.
<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>
<asp:Button ID="d_clip_button" runat="server" Text="Copy" OnClientClick="javascript:test();" />
<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>
<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");
} );
En primer lugar, intentas elegir el elemento con una identificación incorrecta. Como usa formularios web, la forma correcta es:
getElementById(''<%=TextBox2.ClientID%>'')
Además, seguir una buena solución de estilo js discreto podría ser similar a:
$().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);
});
});
Además, su botón debe tener datos de atributos de data-clipboard-target (de hecho, hay tres formas de hacerlo). Establecer atributos de datos para el control de formularios web es complicado, por lo que es posible que desee evitar el uso del botón asp.net aquí y hacerlo de la siguiente manera:
<input type="button" value="clickme" id="YourButtonId" data-clipboard-target="<%=TextBox2.ClientID %>"/>
¡Disfrutar!