2013-07-02 37 views
6

Tôi cố gắng để sử dụng Zero, * Clipboard * để sao chép văn bản từ Textbox để Clipboard khi khách hàng nhấp vào một Nút. Tôi đang cố gắng điều này trong nhiều ngày nhưng không có may mắn để thực hiện công việc này.Sao chép văn bản vào clipboard bằng Zero, Clipboard trong asp.net

Trong kịch bản, tôi có một Textbox mà không thể nhận dữ liệu từ cơ sở dữ liệu . Tôi có một Nút khi khách hàng nhấp vào nên sao chép văn bản của Textbox. Tôi đã thử làm theo nhưng nó không hoạt động.

Một số trợ giúp sẽ được đánh giá cao.

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

Trả lời

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

Bạn có thể tham khảo https://github.com/zeroclipboard/ZeroClipboard. – Rex

2

Trước hết, bạn đang cố gắng để lấy phần tử bằng cách id sai. Kể từ khi bạn sử dụng webforms, cách chính xác là:

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

Ngoài ra, theo giải pháp tốt phong cách phô trương js có thể trông giống như: thuộc tính

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

Cũng nút của bạn sẽ có dữ liệu data-clipboard-target (trên thực tế đang có ba cách để làm điều đó). Việc đặt thuộc tính dữ liệu để kiểm soát biểu mẫu web là khó khăn, vì vậy bạn có thể muốn tránh sử dụng nút asp.net tại đây và thực hiện như sau:

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

Tận hưởng!

+0

Tôi vẫn không thể thực hiện công việc này..Bạn có thể thực hiện điều này trong jsfiddle không. –

+0

@AmritSharma bạn có thể đăng mã hiện tại của mình không? – Sergio

Các vấn đề liên quan