Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Copy to Cpliboard using getlementbyID and innerText not working?

    Greetings,
    I'm trying to create a script which uses a copy to clipboard function. The values are pulled via getElementbyId with innerText being the content that needs to be copied located between <td></td>. Can't seem to get it to work. Everything wiorks fine when I use fields and values but this needs to be <td> based. Any suggestions and inout are much appreciated.

    Thank You

    Code:
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"><!--
    // input field descriptions
    var desc = new Object();
    desc['a1'] = 'First name';
    desc['a2'] = 'Last name';
    desc['a3'] = 'Address';
    desc['a4'] = 'Zip';
    desc['a5'] = 'City';
    desc['a6'] = 'Country';
     
    function CopyFields(){
        var copytext = '';
        for(var i = 0; i < arguments.length; i++){
            copytext += desc[arguments[i]] + ': ' + document.getElementById(arguments[i]).innerText + '\n';}
        var tempstore = document.getElementById(arguments[0]).innerText;
        document.getElementById(arguments[0]).innerText = copytext;
        document.getElementById(arguments[0]).focus();
        //document.getElementById(arguments[0]).select();
        document.execCommand('Copy');
        document.getElementById(arguments[0]).innerText = tempstore;
    }
    --></script>
    </head>
    <body>
    <!-- <textarea id="a1"></textarea><br>
    <textarea id="a2"></textarea><br>
    <textarea id="a3"></textarea><br>
    <textarea id="a4"></textarea><br>
    <textarea id="a5"></textarea><br>
    <textarea id="a6"></textarea><br><br> -->
    
    <td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="a1" name="PROC_CODE">a</td>
    <td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="a2" name="PROC_CODE">b</td>
    <td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="a3" name="PROC_CODE">c</td>
    <td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="a4" name="PROC_CODE">d</td>
    <td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="a5" name="PROC_CODE">e</td>
    <td width="55%" bgcolor="#FFFFFF" class="tLBL1l" id="a6" name="PROC_CODE">f</td>
     
    <a href="#" onclick="CopyFields('a1', 'a2', 'a3', 'a4', 'a5', 'a6');">Copy values of text fields to clipboard</a>
    </body>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You do not have a DOCTYPE declaration or HTML tags, but perhaps you just failed to copy them across(?).

    But, more importantly, TD elements cannot exist outside of a TABLE.
    TD elements do not have (have not had for a long time) bgcolor or name attributes, and the width attribute is deprecated in favour of CSS.

    execCommand is not widely supported - it is more of an IE-proprietary method.

    innerText is also not cross-browser; innerHTML would be. Using innerText would require code like:

    Code:
    function changeText(elem, changeVal) {
        if ((elem.textContent) && (typeof (elem.textContent) != "undefined")) {
            elem.textContent = changeVal;
        } else {
            elem.innerText = changeVal;
        }
    }
    but using innerHTML would be much easier, and more reliable.

    Using 'a1', etc., as your attribute-names is just odd; why not 'FirstName', etc.?
    Last edited by AndrewGSW; 04-07-2013 at 01:11 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    • You are correct in that the DOCTYPE declaration or HTML tags were not copied across but they do exist in my copy

    • This is an older file I am trying to modify which exists on a company intranet so ALL of the name references have been changed (i.e. 'a1', First Name, etc) to ensure privacy for the company.
    ONLY uses IE so cross browser compatability is not an issue.[/LIST]

    That being said. The code I've provided is a snippet from an much larger web form. The form queries a db and the results from the db display between the <td></td> tags. This set up reapeats several times across this web form so if I can get it to work in one area I can adujst to have it avaiable through out the form where needed. The idea it that the user can COPY the results from the query to the clipboard. I have the code below which works fine for fields so I tried to adapt it to what I need. Hopefully that makes sense. Using the code I've provided in this reply do you think I can accomplish that function by just modifying to recognize the <td> data with innerText?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"><!--
    // input field descriptions
    var desc = new Object();
    desc['a1'] = 'First name';
    desc['a2'] = 'Last name';
    desc['a3'] = 'Address';
    desc['a4'] = 'Zip';
    desc['a5'] = 'City';
    desc['a6'] = 'Country';
    
    
    function CopyFields(){
        var copytext = '';
        for(var i = 0; i < arguments.length; i++){
            copytext += desc[arguments[i]] + ': ' + document.getElementById(arguments[i]).value + '\n';}
        var tempstore = document.getElementById(arguments[0]).value;
        document.getElementById(arguments[0]).value = copytext;
        document.getElementById(arguments[0]).focus();
      document.getElementById(arguments[0]).select();
        document.execCommand('Copy');
        document.getElementById(arguments[0]).value = tempstore;
    }
    --></script>
    </head>
    <body>
    <textarea id="a1"></textarea><br>
    <textarea id="a2"></textarea><br>
    <textarea id="a3"></textarea><br>
    <textarea id="a4"></textarea><br>
    <textarea id="a5"></textarea><br>
    <textarea id="a6"></textarea><br><br>
    
    
     
    <a href="#" onClick="CopyFields('a1', 'a2', 'a3', 'a4', 'a5', 'a6');">Copy values of text fields to clipboard</a>
    </body> 
    
    
    </html>

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you are just using IE and you place the TDs in a table then, yes, it should be able to work.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •