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
