locked
Copy to clipboard from FreeTextBox RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User646364117 posted

    I have code froma tutorial (https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) that copies text from an input control

    I created a test web form and the code works.

    However I want to copy from a FreeTextBox which is a server side control. Can I do that? TIA

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ClipboardTest.aspx.vb" Inherits="ClipboardTest" %>
<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>
<!DOCTYPE html>

<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput")

/* Select the text field */
copyText.select();

/* Copy the text inside the text field */
document.execCommand("copy");

/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
<body>
<form id="form1" runat="server">
<div>
<!-- The text field -->
<input type="text" value="Hello World" id="myInput">


<FTB:FreeTextBox ID="ftb1" runat="Server" />
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
</div>
</form>
</body>

    Saturday, February 22, 2020 1:06 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User646364117 posted

    I tried this but it didn't work

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ClipboardTest.aspx.vb" Inherits="ClipboardTest" %>
<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>
<!DOCTYPE html>
<body>
    <form id="form1" runat="server">
        <div>
            <FTB:FreeTextBox ID="ftb1" runat="Server" />
            <!-- The button used to copy the text -->
            <asp:Button ID="CopyButton" runat="server" Text="Copy" />
        </div>
    </form>
</body>



Partial Class ClipboardTest
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then
            CopyButton.Attributes.Add("onclick", "javascript:window.clipboardData.setData('Text', document.getElementById('ftb1').value);")
        End If

    End Sub
End Class

    Saturday, February 22, 2020 2:50 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User646364117 posted

    Also tried this, to no avail

    Partial Class ClipboardTest
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then
            CopyButton.Attributes.Add("onclick", "javascript:window.clipboardData.setData('Text', document.getElementById('<%=ftb1.ClientID%>').value);")
        End If

    End Sub
End Class

    Saturday, February 22, 2020 2:56 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    I'm a little confused on the approach.  The clipboard is on the client machine not the server.  Use standard ASP.NET state management if you want to persist data on the server. 

    Can you explain what "Also tried this, to no avail" means?  Are you receiving JavaScript errors?  Why are you doing a postback only to generate JavaScript?  can you provide the highlevel design or problem you are trying to solve?

    Saturday, February 22, 2020 2:58 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User646364117 posted

    Let me explain. 

    I am creating a document in a freeTextBox on a web page. That is a wysiwig editor. I know I can save this data. via  typical asp.

    However I want the user to be able to copy and paste this data into another document. I want the user to be able to do this by pressing a button rather than doing a manual copy and paste. So I want to copy the data to the clipboard when a button is pressed and then do a manual paste. I am saving the user from having to select the text and then doing a copy.

    I am not getting an errors. I am able to break on the CopyButton.Attributes.Add line in code behind but the text is not copied. 

    When I try to do a manual paste into another document after clicking the button, the text is not what was in the freetextbox.

    The screen does flicker when I press the button so a postback was done.

    Saturday, February 22, 2020 3:17 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    It sounds like you just need a proper selector to copy the text to the clipboard.  I recommend using the browser's dev tools to help you build the code.  simply right click on the text area and select "Inspect".  This will open dev tools and select the markup that you right clicked.  From here you can right click the selection, Copy, Copy Selector.  Then just paste the string.  You might have to modify things a bit like use <% =ServerControl.ClientID %> in place of the generated IDs but it should provide a good template.  

    IMHO, there is no good reason to do a postback.  Just write a little JavaScript.  You might also consider reading the FreeTextBox docs as they probably have sample code for reading content in JavaScript.

    Edit: I created a test and found the FreeTextbox generates an iframe.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="FreeTextBoxDemo.aspx.cs" Inherits="WebFormsDemo.FreeTextBoxDemo" %>
<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <FTB:FreeTextBox id="FreeTextBox1" runat="server" />
    </div>
    <div>
        <input id="Button1" type="button" value="Copy" /></div>

    <script>
        //body
        $('#Button1').click(function () {
            var content = $("iFrame").contents().find("body");
            console.log($(content).html());
        });
    </script>
</asp:Content>

    Saturday, February 22, 2020 3:57 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User646364117 posted

    I did the inspection and the element of interest was a textarea with id of ftb1 so I used 

    CopyButton.Attributes.Add("onclick", "javascript:window.clipboardData.setData('Text', document.getElementById('<%=ftb1.ClientID%>').value);")but it didn't work.

    I'm wondering if I have to use 'InnerHTML'?

    I saw that freetextbox has a copy button in its menu so I can use that. It requires the user to make a selection first. For now, that will do.

    Saturday, February 22, 2020 5:40 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User288213138 posted

    Hi sg48asp,

    However I want to copy from a FreeTextBox which is a server side control. Can I do that? TIA

    You can use a javascript. But this would work only in IE.

    <script>
         $(document).ready(function(){
             $('#Button1').click(function () {
                 var email = document.getElementById('FreeTextBox1');
                 var emailValue = email.value;
                 //copy to clipboard 
                 window.clipboardData.setData('Text', emailValue);
                 // get the clipboard data
                 var emailText = window.clipboardData.getData('Text');
                 alert(emailText);              
             });
         });         
    </script>

    The result:

    Best regards,

    Sam

    Monday, February 24, 2020 10:15 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User646364117 posted

    Thank you. I tried it in Chrome and it didn't work. 

    Is there a way to modify it for Chrome?

    TIA?

    Monday, February 24, 2020 11:27 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User288213138 posted

    Hi sg48asp,

    Thank you. I tried it in Chrome and it didn't work. 

    Is there a way to modify it for Chrome?

    This is a browser issue, I suggest you go to the chrome forum for help.

    Best regards,

    Sam

    Tuesday, February 25, 2020 8:00 AM