JavaScript - Add Commas To # Automatically When Typing

I frequent a site that involves typing huge numbers. And I'm thinking of making a userscript that automatically adds commas as I type numbers on all the input boxes. There are multiple input boxes and it has two types: First input type has similar name ; Second input type has similar class.

Here's an example of a page:
Code:

<input type="text" value="0" name="buy_price"><br/>
<input type="text" value="0" name="buy_price"><br/>
<input type="text" value="0" name="buy_price"><br/>
<br/>
<input type="text" value="0" class="money-input"><br/>
<input type="text" value="0" class="money-input"><br/>
<input type="text" value="0" class="money-input">

My code so far. But it doesn't seem to work. The main function was taken from here.
Code:

function add_commas(number){

	//remove any existing commas...
	number=number.replace(/,/g, "");
	//start putting in new commas...
	number = '' + number;
	if (number.length > 3) {
		var mod = number.length % 3;
		var output = (mod > 0 ? (number.substring(0,mod)) : '');
		for (i=0 ; i < Math.floor(number.length / 3); i++) {
			if ((mod == 0) && (i == 0))
				output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
			else
				output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
		}
		return (output);
	}
	else return number;
}

function addattribute() {

	//adds onkeyup and removes zero of first input type
	document.getElementsByName("buy_price")[0].setAttribute("onkeyup", "this.value=add_commas(this.value);"); 
	document.getElementsByName("buy_price")[0].removeAttribute('value');

	//adds onkeyup and removes zero of second input type
	document.getElementsByClassName("money-input")[0].setAttribute("onkeyup", "this.value=add_commas(this.value);"); 
	document.getElementsByClassName("money-input")[0].removeAttribute('value');
}

window.onload = addattribute;

EDIT: I believe the function function add_commas(number) works. But the problem is I need to find a way to add
onkeyup="this.value=add_commas(this.value);" to the input boxes mentioned.

EDIT #2: Well I guess I'm back to 0.The function function add_commas(number) seems to only work if it's on the actual html file inside <script> tags. But once you separate it and apply it as a userscript, it doesn't seem to function.

I know there's a way to do it in Jquery, but in simple javascript is there a way to "type" into a textbox? Or, modify what's typed? I tried using macros but it doesn't fill out the form after refresh.

Hello guys

I've made javascript tutorial for those who want to learn more

here's the tutorial on my front page : http://www.youtube.com/user/morplug
or direct link : http://www.youtube.com/watch?v=MikXCLWkSPs

I'll be happy to continue making more tutorials , To show me you want more please Like the video and subscribe if you want!

regards , Mor.

i'm using a JavaScript typing tutorial....here is my code

[CODE]

<script type="text/javascript">
//<![CDATA[

var garray = new Array();
var garrayIndex = -1;
var gtext = "";
var gindex = 0;
var goldPressed = 0; //previous pressed key code
var goldTarget = 0; //previous target key code
var gtarget = 0;
var gpressed = 0;
var ggood = 0;
var gtotal = 0;
var gtime = 0;
var gkeytime = 0;



function setup() {

setEvents();

//change this array to suit your needs but note that indices
//must ascend by 1 from 0: garray[0]="foo"; garray[1]="bar";...
garray[0] = "a s d f s d f f s d as sd ad fs ds sad af sa fa dafa sda dad das afa sfd add sasd df sf saf dds fd ads safd fsd fas sas dafs as fad";

//more similar lines can easily be added above, dont forget to get the index right!

garrayIndex = -1;

next();
}



function setPatternInit() {

//#b note: once we did this using innerHTML but this caused
//a leakage of handles in ie

var pat = document.getElementById("pattern");

for(; {
if (pat.hasChildNodes()) {
pat.removeChild(pat.lastChild);
}
else break;
}

var cname = "done";
for (j=0; j<gtext.length; j++) {
var ch = gtext.charAt(j);

if (j>gindex) cname = "future";
else if (j==gindex) cname = "todo";

var kid = document.createElement("span");
kid.className = cname;

var txt = document.createTextNode(ch);
kid.appendChild(txt); //#b innertext doesnt work on firefox
pat.appendChild(kid);
}
}

function setPattern() {

var pat = document.getElementById("pattern");
var kids = pat.childNodes;

var cname = "done";

for (j=0; j<gtext.length; j++) {
if (j>gindex) cname = "future";
else if (j==gindex) cname = "todo";

var kid = kids[j];
kid.className = cname;
}
}


function mapToBoard(code) {
if ((code>=97)&&(code<=108)) return (code-32);
if ((code>=110)&&(code<=122)) return (code-32);
if ((code>=65)&&(code<=90)) return code;
if ((code>=48)&&(code<=57)) return code;
if ((code==32)) return code;
if ((code==44)||(code==46)||(code==47)||(code==59)) return code;
return 0; //not on our board picture
}


function setBoard() {

var letter;
var elt;
var c;
var s;


if (goldTarget!=0) {
c = mapToBoard(goldTarget);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "silent";
elt.className = s;
}
}
if (goldPressed!=0) {
c = mapToBoard(goldPressed);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "silent";
elt.className = s;
}
}

if (gtarget!=0) {
c = mapToBoard(gtarget);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "target";
elt.className = s;
}
}
if (gpressed!=0) {
c = mapToBoard(gpressed);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "pressed";
elt.className = s;
}
}

}

function nextPattern() {

goldTarget = gtarget;
goldPressed = gpressed;

if (++garrayIndex == garray.length) garrayIndex = 0;
gtext = garray[0]; gindex = 0;
gpressed = 0;

setPrompt();
}

function prevPattern() {

goldTarget = gtarget;
goldPressed = gpressed;

if (--garrayIndex < 0) garrayIndex = garray.length - 1;
gtext = garray[garrayIndex]; gindex = 0;
gpressed = 0;

setPrompt();
}

function next() {

nextPattern();
setPatternInit();
setBoard();
}

function prev() {
prevPattern();
setPatternInit();
setBoard();
}


function skip(e) {
next();
return false;
}


function back(e) {
prev();
return false;
}



function setEcho(c, isOK) {
var s;
if (c<' ') c=' ';

var s = "["+c+"]";
if (!isOK) s += " ..OOPS!"


var elt = document.getElementById("echo");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}

function setPrompt() {
var ch = gtext.charAt(gindex);
gtarget = ch.charCodeAt(0);
}

function adjustStatistics(ch) {
return; //could count errors by character
}


function updateSpeed(ok) {
var t = (new Date()).getTime();
var dt = (t-gtime);
gtime = t;
if (dt > 5000) return; //ignore sleepy user
gkeytime += dt;

var s = (0.5+ggood*60*200/gkeytime).toFixed(0) + "";
var elt = document.getElementById("speed");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}


function updateScore(ok) {
if (ok) ggood++;
gtotal++;

updateSpeed(ok)

var s = ggood.toFixed(0) + "";
var elt = document.getElementById("count");

var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);


s = (gtotal-ggood).toFixed(0) + "";
elt = document.getElementById("accuracy");

txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);


var s = (gkeytime/1000).toFixed(2) + " s";
var elt = document.getElementById("time");

var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);


}


function reset(e) {

window.location.reload();

}



function debug() { //#b to use, set body onLoad="debug()" instead of "setup()" in html
//document.onkeydown=debugKey; //#b
document.onkeypress=debugKey;
}

function debugKey(evt) { //#b

var e = (window.event) ? window.event : evt; //#b
var k = (e.which)? e.which : e.keyCode;
var f = filterKeyCode(k);

var s = "k="+k+",f="+f;
alert(s);

return false;
}

function setEvents() { //#b
document.onkeydown=down; //#b
document.onkeypress=press;
(document.getElementById('skip')).onmousedown=skip;
(document.getElementById('back')).onmousedown=back;
(document.getElementById('reset')).onmousedown=reset;
}


function cleanup() {
//pointless, really
document.onkeydown=null; //#b
document.onkeypress=null;
(document.getElementById('skip')).onmousedown=null;
(document.getElementById('back')).onmousedown=null;
(document.getElementById('reset')).onmousedown=null;
}


function filterKeyCode(code) { //from key down (0 to ignore)

//note: user must have num lock set if they want to use keypad numbers

if ((code>=65)&&(code<=90)) return code; //alpha
if ((code>=48)&&(code<=57)) return code; //numberic
if (code==32) return code; //blank
if ((code>=96)&&(code<=105)) return code; //number pad digits
if ((code==13)||(code==16)) return code; //enter, shift
if ((code>=106)&&(code<=111)) return code; //number pad operators
if ((code>=186)&&(code<=192)) return code; //punctuation
if ((code>=219)&&(code<=222)) return code; //punctuation

return 0;
}


function filterCode(code) { //from key press as ascii char code (0 to ignore)
if ((code==13)||(code==16)) return code; //enter and shift are allowed
if (code<32) return 0;
if (code>=127) return 0;
return code;
}



function capsLockFilter(e, pressed) { //#b many problems making this cross browser!

//#b e.modifiers known only on early mozilla (which does not know standard e.shiftkey)?

var shifted = e.shiftKey || (e.modifiers && (e.modifiers & Event.SHIFT_MASK)); //#b

var locked = (((pressed > 64) && (pressed < 91) && (!shifted))
|| ((pressed > 96) && (pressed < 123) && (shifted)));
if (locked) alert("caps lock!");
}


function down(evt) { //#b

var e = (window.event) ? window.event : evt; //#b
var rawcode = (e.which)? e.which : e.keyCode;
pressed = filterKeyCode(rawcode);

if (pressed > 0) return true;

if (typeof(e.cancelBubble)!="undefined") e.cancelBubble = true;
if (typeof(e.stopPropagation)!="undefined") e.stopPropagation();
return false; //#b nuisance keys - backspace etc on ie (no effect for capslock!!)

}


function press(evt) { //#b


//#b should work in ie, firefox, safari(hopefully), opera(hopefully)


var e = (window.event) ? window.event : evt; //#b

var pressed = 0;
var wc = -1;
var kc = -1;
var cc = -1;


if (typeof(e.keyCode)!="undefined") kc = e.keyCode; //ie
if (typeof(e.charCode)!="undefined") cc = e.charCode; //firefox
if (typeof(e.which)!="undefined") wc = e.which; //old mozilla

if ((kc>=0)&&(cc>=0)) { //firefox
pressed = cc;
}
else if (kc>=0) pressed = kc; //ie
else if (wc>=0) pressed = wc; //old mozilla

//alert("pressed="+pressed+",kc="+kc+",cc="+cc+",wc="+wc);


pressed = filterCode(pressed);
if (pressed==0) {
if (kc==13) return skip(); //#b firefox
else return false;
}
if (pressed==13) return skip(); //#b ie

capsLockFilter(e, pressed); //hmm

var c = String.fromCharCode(pressed); //ie from ascii code
var ch = gtext.charAt(gindex);
var ok = (c==ch);

goldPressed = gpressed;
gpressed = pressed;
goldTarget = gtarget;

if (ok) {
gindex++;

if (gindex==gtext.length) {
if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime >= 20) {
alert('Good work! You had fewer than 5 errors and typed faster than 20 WPM! Now try the next exercise!');
setPatternInit();
}
else if (gtotal-ggood > 5 && 0.5+ggood*60*200/gkeytime >= 20){
alert('Good speed! You were over 20 WPM but have more than five errors! Slow down a bit for accuracy.')
setPatternInit();
}
else if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime < 20){
alert('Good accuracy! You had fewer than 5 errors, now try for 20 WPM.')
setPatternInit();
}
else
alert ('Focus on accuracy first, then go for speed!');
setPatternInit();
}
else setPattern();

gpressed = 0;
setPrompt();
setEcho(c, true);
updateScore(true);
}
else {
setEcho(c, false);
updateScore(false);
setPattern()
}

setBoard();
return false;
}


//</XMLCDATA>
</script>


[CODE]

This is my HTML Code :

[CODE]


<body onload="setup()" onunload="cleanup()">

<div id="container1">
<div id="container3">


<div id="body">



<div id="pattern" class="big">
</div>

<div id="prompt" class="prompt">
</div>

<div id="board" class="board">

<div id="row0" class="row0">
<span id="code49">1</span>&nbsp;<span id="code50">2</span>&nbsp;<span id="code51">3</span>&nbsp;<span id="code52">4</span>&nbsp;<span id="code53" style="margin-left:-5px;">5</span>&nbsp;<span id="code54">6</span>&nbsp;<span id="code55">7</span>&nbsp;<span id="code56">8</span>&nbsp;<span id="code57">9</span>&nbsp;<span id="code48">0</span>
</div>
<div id="row1" class="row1">
<span id="code81">Q</span>&nbsp;<span id="code87">W</span>&nbsp;<span id="code69">E</span>&nbsp;<span id="code82" style="font-weight:bold">R</span>&nbsp;<span id="code84">T</span>&nbsp;<span id="code89">Y</span>&nbsp;<span id="code85" style="margin-left: -2px;">U</span>&nbsp;<span id="code73">I</span>&nbsp;<span id="code79">O</span>&nbsp;<span id="code80">P</span>

</div>
<div id="row2" class="row2">
<span id="code65">A</span>&nbsp;<span id="code83">S</span>&nbsp;<span id="code68">D</span>&nbsp;<span id="code70" style="font-weight:bold;">F</span>&nbsp;<span id="code71" style="margin: 0 0 0 -5px;">G</span>&nbsp;<span id="code72">H</span>&nbsp;<span id="code74" style="font-weight:bold;">J</span>&nbsp;<span id="code75">K</span>&nbsp;<span id="code76">L</span>&nbsp;<span id="code59">;</span>&nbsp;
</div>
<div id="row3" class="row3">
<span id="code90">Z</span>&nbsp;<span id="code88">X</span>&nbsp;<span id="code67">C</span>&nbsp;<span id="code86"
style="font-weight:bold">V</span>&nbsp;<span id="code66">B</span>&nbsp;<span id="code78">N</span>&nbsp;<span id="code77" style="font-weight:bold">M</span>&nbsp;<span id="code44">,</span>&nbsp;<span id="code46">.</span>

</div>



<div id="row4" class="row4">
<span id="code32">[SPACE]</span>
</div>


<div id="scores">
<div class="count">Characters:
<span id="count"></span>
</div>
<div class="accuracy">Errors:
<span id="accuracy"></span>
</div>
<div class="speed">WPM:
<span id="speed"></span>
</div>

<div class="time">Time:
<span id="time"></span>

</div>
</div>







<div align="center">
<button id="reset" class="button123" name="reset" align="center">Restart Exercise</button>
</div>
</div>


<div id="echo" class="echo" style="display:none;">
[]
</div>

<div style="display:none;">
<button id="skip" class="button123" name="skip">skip</button> to next line ("enter" key is shortcut)

</div>
<div style="display:none;">
<button id="back" class="button123" name="back">back</button> to previous line
</div>
</div>

</div>

[CODE]




Can any one help me to input the speed, accuracy and count to a database. I can't able to take the value because its JavaScript....

it is required to locate the typing cursor in field after when click ok on java alert


thanks in advance !!