JS Click a Button to Copy the Content of Textarea

  • Last update:  2020-12-17
  • I. Description

    When designing reports, we usually encounter requirement, that is to directly copy the content of a text area by clicking a button, as shown below:

    1606377029591449.gif

    II. Steps

    2.1 Create a new template

    1) Click cell A1, select Cell Element, choose Insert Text, and enter the HTML code as follows:

    <textarea rows="20" cols="20" id="biao1">User Copy are</textarea> 
    <input type="button" onclick="copytext()" value="copy"> 

    1606377208480266.png


    2) Click Cell Attributes > Other, and select Display by HTML, as shown in the figure below:

    1606377182117683.png


    2.2 Import JS file

    1) Create a new JS file

    Add a file copy.js under the path %FR_HOME%\webroot\scripts\js. You can click to download the copy.js file:  

    copy.js

    The code in the JS file is shown as below:

    function copytext(){
       var copytext2=document.getElementById("biao1");//Get the text box
       copytext2.select();//Select the content of the text box
       document.execCommand("copy");//Execute browser's copy command
       alert("Copy Success!");//The output has been copied text
    }

    2) Quote JavaScript

    Click Template > Web Attributes > Reference JavaScript. Select the JS file created in the previous step, and click Add to let the template reference this file, as shown in the following figure:

    1606377132224637.png

    III. View the Effect

    3.1 PC side

    1606377072518561.gif


    3.2 Mobile

    Mobile devices are not supported.

    IV. Completed Template

    Attachment List


    Theme: Secondary Development
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy