faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

33 of 55 people (60%) answered Yes
Recently 7 of 10 people (70%) answered Yes

Entry

JavaScript: Copy: Clipboard: How copy from a component to clipboard? [hidden/SELECT/button/dynamic]

Apr 7th, 2008 23:56
ha mo, Knud van Eeden,


----------------------------------------------------------------------
--- Knud van Eeden --- 20 September 2004 - 02:00 am ------------------
JavaScript: Copy: Clipboard: How copy from a component to clipboard? 
[hidden/SELECT/button/dynamic]
---
Use e.g. a hidden text field to copy your text to.
---
Steps: Overview:
 1. -Create your form on your HTML page, and give it a name
       <FORM
         NAME = "..."
       >
 2. -Create your component (usually inside this form) on your
     HTML page, and give it a name
     e.g. a list select/option
       <SELECT
         NAME = "..."
       >
     e.g. a button
       <BUTTON
         NAME = "..."
       >
     and so on.
 3. -Call the procedure that will copy the option you chose
     in your list
         PROCTextCopyListSelectOption( document.forms.form1, 
document.forms.form1.<your component name>.value )
     1. As the first parameter, you pass the name of your form
         e.g.
          document.forms.<your formname>
     2. As the second parameter, you pass the value (or text) of your 
component
         e.g.
          document.forms.<your formname>.<your component name>.value
 4. -In the procedure the hidden text box (needed because you
     can only copy from text boxes in JavaScript, so you have
     to somehow transfer the text in the component to the
     hidden text box here) is
     dynamically generated, because it should happen automatically,
     as it is only necessary here for this copying purposes.
     1. You use the innerHTML command, which adds the
        tag
         '<INPUT
            type="hidden"
            name="<your hidden name>"
            value="<your listbox value>"
          >'
        to the information already on the form
 5. -It should only create this hidden text tag one time
     (so you test with 'typeof()' to see if it is already created.
     If not, create it, else do not create it again).
 6. -You copy then the component option text into the hidden text box.
         ...value = ... component ...value
 7. -You 'select all' the content of the hidden text box
         ... createTextRange(); together with 'select()'
 8. -You copy the content of the selected text to the clipboard
         ... 'copy'
 9. Run the following program
    1. Put the following text in a .html file
    2. Run it in your browser
    3. That will show a
        listbox
        button
        checkbox
        radiobox
        [V A  ]
        [ copy to clipboard  ]
        [ x ] checkbox
        [ o ] radiobox
    4. Copy to clipboard
       1. If you select from the list
          then 'option ...' will be copied to the clipboard.
       2. If you press the button then 'Copy' will be copied
          to the clipboard.
       3. If you click the checkbox then 'true' or 'false' will be
          copied to the clipboard.
       4. If you click the radiobox then 'on' (instead of 'off')
          will be copied to the clipboard.
       5. Thus if you do a paste via e.g. <CTRL><V>,
          you will see that the current selected components
          information is pasted.
---
Note: you generalize here by passing the value as a string, instead
      by passing the object itself.
      The string value is here more general, as it something similar
      for all objects here.
---
---
--- cut here: begin --------------------------------------------------
<!-- ------------------------------------------------------>
<HTML>
<!-- ------------------------------------------------------>
<HEAD>
<!-- ------------------------------------------------------>
<TITLE>
  Component: Copy: Clipboard
</TITLE>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!--
<!-- library: text: copy: list: select: option [kn, ri, tu, 14-09-2004 
19:10:34] -->
function PROCTextCopyComponentValue( form1, s ) {
 var temp1 = null;
 var hidden1 = null;
 if ( typeof( form1.hidden1 ) == "undefined" ) {
  form1.innerHTML += '<INPUT TYPE="hidden" NAME="hidden1" VALUE="' + s 
+ '">';
 }
 form1.hidden1.value = s;
 temp1 = form1.hidden1.createTextRange();
 temp1.select();
 temp1.execCommand( 'copy' );
}
// -->
</SCRIPT>
<!-- ------------------------------------------------------>
</HEAD>
<!-- ------------------------------------------------------>
<BODY>
<!-- ------------------------------------------------------>
<FORM
  NAME="form1"
>
<!-- ------------------------------------------------------>
<SELECT
  NAME="list1"
  ONCHANGE=' PROCTextCopyComponentValue( document.forms.form1, 
list1.options[ list1.selectedIndex ].value );'
>
<OPTION VALUE="">Please select</OPTION>
<OPTION VALUE="option 1">A</OPTION>
<OPTION VALUE="option 2">B</OPTION>
<OPTION VALUE="option 3">C</OPTION>
<OPTION VALUE="option 4">D</OPTION>
</SELECT>
<!-- ------------------------------------------------------>
<BUTTON
  NAME="button1"
  ONCLICK=' PROCTextCopyComponentValue( document.forms.form1, 
document.forms.form1.button1.value );'
>
 Copy
</BUTTON>
<!-- ------------------------------------------------------>
<INPUT
  NAME="checkbox1"
  TYPE="checkbox"
  ONCLICK = ' PROCTextCopyComponentValue( document.forms.form1, 
document.forms.form1.checkbox1.checked );'
>
Copy checkbox to clipboard
</INPUT>
<!-- ------------------------------------------------------>
<INPUT
  NAME="radio1"
  TYPE="radio"
  ONCLICK = ' PROCTextCopyComponentValue( document.forms.form1, 
document.forms.form1.radio1.value );'
>
</INPUT>
<!-- ------------------------------------------------------>
</FORM>
<!-- ------------------------------------------------------>
</BODY>
<!-- ------------------------------------------------------>
</HTML>
<!-- ------------------------------------------------------>
--- cut here: end ----------------------------------------------------
---
---
Succesfully tested on Microsoft Windows XP Professional,
using Microsoft Internet Explorer v6.
---
---
Internet: see also:
---
JavaScript: Copy: Clipboard: List: How to: How copy from list to 
clipboard? [hidden/SELECT/dynamic]
http://www.faqts.com/knowledge_base/view.phtml/aid/31475/fid/178
----------------------------------------------------------------------
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com