Trick: Copy to Clipboard

Discussion in 'Hints, Tips and Tricks' started by grey666, Sep 30, 2011.

  1. grey666 Member

    Level: Community
    This is a very obscure trick, but worthwhile at the same time.

    This allows you to copy any data to the windows clipboard from any field in any Fabrik form - on any javascript event.

    Download the code, place it in it's own directory - i.e. "www/zeroclipboard". www is your root web directory.

    Download the code here:
    http://code.google.com/p/zeroclipboard/downloads/list

    Next ...

    In the Fabrik form, place the following code in the Introduction area: Use the HTML Button ... (This puts a button at the top of your form, using Flash.)

    <script src="zeroclipboard/ZeroClipboard.js" type="text/javascript"></script>
    <div id="d_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Text To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );
    clip.setText( 'Copy me!' );
    clip.glue( 'd_clip_button' );
    // ]]></script>


    Next, add a javascript event to any Fabrik field.

    For example... a text box field. Add javascript, Action: On Change:
    clip.setText( $('db_content___Text').value );

    db_content is the Fabrik table name, Text is the field.


    Action: On Load:
    clip.setText( $('db_content___Text').value );


    That's it... click a button and the data from your Fabrik fields is copied to the Windows clipboard.

    Try mouse-over... it's fun.


    Multiple zeroclipboard buttons: (Fabrik Form, Introduction, HTML)
    <script src="zeroclipboard/ZeroClipboard.js" type="text/javascript"></script>
    <table style="width: 100%;" border="0"><tbody><tr><td>
    <div id="d_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Text To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );
    clip.setText( 'Copy me!' );
    clip.glue( 'd_clip_button' );
    // ]]></script>
    </td><td>
    <div id="e_clip_button" style="border: 1px solid black; padding: 5px; margin: 5px; width: 40%;">Output To Clipboard</div>
    <script type="text/javascript">// <![CDATA[
    ZeroClipboard.setMoviePath( 'http://Yourdomain.com/zeroclipboard/ZeroClipboard10.swf' );
    var clip2 = new ZeroClipboard.Client();
    clip2.setHandCursor( true );
    clip2.setText( 'Copy me!' );
    clip2.glue( 'e_clip_button' );
    // ]]></script>
    </td></tr></tbody></table>


    This creates two flash movies ... at the top of your form, which can monitor two different Fabrik fields at the same time.

Share This Page