Clipboard java script to copy HTML form fields

@HolyflameJul 31.2008

[FONT=”Tahoma”]
Hi All,

Its been a week I’ve been RnD on Java sciprt….:o
I am looking for java script ,which will copy all HTML form fields in one click ( whatever we enter) and after that we can copy it to Notepad or anywhere ..

Appreciate your help?
[/FONT]

to post a comment

JavaScript

12 Comments(s) _↴

@felgallJul 31.2008 — #JavaScript has no access to anything outside the web browser. JScript can access the clipboard but that only runs on Internet Explorer.

@rnd_meAug 01.2008 — #[FONT="Tahoma"]

Hi All,

Its been a week I've been RnD on Java sciprt....:o

I am looking for java script ,which will copy all HTML form fields in one click ( whatever we enter) and after that we can copy it to Notepad or anywhere ..

Appreciate your help?

[/FONT][/QUOTE]

ie7 blocked ie6's easy access. i have some code that might help.

is an ie6 or a firefox only solution acceptable for you, or is this for a public site?

@felgallAug 01.2008 — #A browser specific solution for one of the two or three browser versions that support it would be the only choice since most web browsers have that security hole closed off so that the single browser solutions will only work for an intranet site or where your visitor has their browser security set wrong.

@rnd_meAug 01.2008 — #A browser specific solution for one of the two or three browser versions that support it would be the only choice since most web browsers have that security hole closed off so that the single browser solutions will only work for an intranet site or where your visitor has their browser security set wrong.[/QUOTE]

yes. its a security pref in ie6: tools, internet options, security, custom level.

in forefox it's an about:config pref: signed.applets.codebase_principal_support needs to be true. this will then prompt you (with an optional remeber) to decide if you want the current page to be able to access your clipboard. i have mine set, and i have never seen a public page ask.

the following is a unified function for IE and firefox

[CODE]
 
 /* text version */
 function CBtxt(f) {var bP = typeof f == "undefined";if (window.clipboardData) {if (!bP) {window.clipboardData.setData("Text", f);return;}return window.clipboardData.getData("Text");} else {FT = "text/unicode";CI = Components.interfaces;Cb = CI.nsIClipboard;C = Components;Cs = CI.nsISupportsString;Cm = "@mozilla.org";Cmw = Cm + "/widget/clipboard;1";try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");e = C.classes[Cmw].createInstance(Cb);var clip = C.classes[Cmw].getService(Cb);} catch (e2) {return;}try {b = C.classes[Cm + "/widget/transferable;1"].createInstance(CI.nsITransferable);} catch (e3) {return;}b.addDataFlavor(FT);if (typeof f == "undefined") {clip.getData(b, clip.kGlobalClipboard);var str = {};var strLength = {};b.getTransferData(FT, str, strLength);if (str) {str = str.value.QueryInterface(Cs);}if (str) {f = str.data.substring(0, strLength.value / 2);}return f;}o = C.classes[Cm + "/supports-string;1"].createInstance(Cs);o.data = f;b.setTransferData(FT, o, f.length * 2);try {t = CI.nsIClipboard;} catch (e4) {return;}e.setData(b, null, t.kGlobalClipboard);return;}return;}
 [/CODE]

if you pass f, the clipboard is set with f. if you just call CBtxt() you will get the current text on the clipboard.

@felgallAug 02.2008 — #Your else clause also needs to test if the browser is the one that supports that code and is not one of the thousands of browsers that supports neither option.

@HolyflameauthorAug 04.2008 — #Thanks Guys for your input..!!!

I will put it more clearly now. I have a form which has 4 text fields. I can type in those text fields and when I click copy button( which will work like a clipboard function) it should copy all the text fields data.

I have done for 1 text field but problem comes when there is a more then 1 text field.:rolleyes:

Hope I made it clear now...

@HolyflameauthorAug 04.2008 — #We will be using IE only...

@rnd_meAug 04.2008 — #Thanks Guys for your input..!!!

I will put it more clearly now. I have a form which has 4 text fields. I can type in those text fields and when I click copy button( which will work like a clipboard function) it should copy all the text fields data.

I have done for 1 text field but problem comes when there is a more then 1 text field.:rolleyes:

Hope I made it clear now...[/QUOTE]

you need to pass over each field, and extract the value to a string.

you then copy the resulting string. theres lots of ways to visit the fields.

if there are only four of them, the simplest way would likeley to give each one you need an id attrib.

then your code simply calls each element by id, and concats the value to a buffer.this point in the code this is a good change to cleanup/format the text.

a simple example would be something like:

[CODE]<input id="t1" /><input id="t2" /><input id="t3" /><input id="t4" />
 <script>
 function el(tid) {return document.getElementById(tid);}
 
 function copyEm(){
 var buffer = el("t1").value;
 buffer+= el("t2").value;
 buffer+= el("t3").value;
 buffer+= el("t4").value;
 CB(buffer);
 
 }
 
 </script>[/CODE]

edit:

not sure if you are on ie6 or ie7, but if it's ie7, you will need to change a security pref to get the code ive posted to work.

@HolyflameauthorAug 07.2008 — #Thank you!

From your code I can decipher that buffer value would be the abcd if I put a,b,c,d in t1,t2,t3,t4 respectively..hope I have understood correctly.

But I find confusing ,how to pass this buffer value to clipboard function..So that when I call clipboard function on click it should copy the buffer value and after that I can paste in Notepad..

@HolyflameauthorAug 07.2008 — #See this is a prototype of my code...

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<input type="text" name="a1" value="" id="t1" />

<input type="text" name="a2" value="" id="t2" />

<input type="text" name="a3" value="" id="t3" />

<input type="text" name="a4" value="" id="t4" />

<script>

function el(tid) {return document.getElementById(tid);}

function copyEm(){

var buffer = el("t1").value;

buffer+= el("t2").value;

buffer+= el("t3").value;

buffer+= el("t4").value;

CB(buffer);

}

function CB(buffer)

{

Copied = buffer;

Copied.execCommand("Copy");

}

</script>

<body>

<BUTTON onClick="copyEm();">Click here to Copy the contents </BUTTON>

</body>

</html>

Appreciate your suggestions.....

@felgallAug 07.2008 — #You need to put some sort of separator in between the values. For example:

function copyEm(){
 var b = [];
 b.push(el("t1").value);
 b.push(el("t2").value);
 b.push(el("t3").value);
 b.push(el("t4").value);
 var buffer = b.join(';');
 CB(buffer);
 }

Which loads the values into an array and then joins the array values together with semi-colons in between

Also in #JavaScript _↴

script src in httprequest problem Javascript works on IIS but not Apache server not getting variables through $_POST

Success!

Help @Holyflame spread the word by sharing this article on Twitter...

Tweet This

Clipboard java script to copy HTML form fields

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Clipboard java script to copy HTML form fields

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴