Formatting text field while user types to it

[SpeedyDuh]

The goal of this script is to insert thousand separators into number string as the user types the number to avoid confusion when numbers get longer, like up to billion. I have achieved this on internet explorer but i'm strugling to get it crossplatform compatible.

123456789 as example string:
on IE and Firefox i get 123,456,789 as expected.

on opera however, i get 1,234 as expected.. then the cursor lags one character so when pressing 5, i get 12,354, then 123,564, then 1,235,674.. adding the comma by script doesnt move the cursor while the string gets one character longer.

My code retrieves textarea value with new char added to it, removes commas by regexp and then adds commas back to their right places in next sweep. Tthe value is then placed back to the source textarea.

Is there a way around this problem or maybe even a dirty hack to make it work? i'm pretty novice with javascripting still

 

[mwolf00]

Can you post the code you are already using?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

Tsuna​

 

[SpeedyDuh]

Ok, this is the code currently:

calling part from html:
onKeyUp="return validate('source-id')

// JavaScript Document
function insertCommas(v) 
	{
		var sVar = v.toString();
		var sReturn = '';
		var iCommas;
		var iCommaAfter;
		var j = 0;

		if(sVar.length <= 3) { return sVar; }
		iCommas = Math.floor(( sVar.length - 1 ) / 3 );
		iCommaAfter = (( sVar.length ) - iCommas * 3 );
		for( i = 0; i < sVar.length; i++) 
			{
				if( i == iCommaAfter ) 
					{
						sReturn = sReturn + ',';
						iCommaAfter = iCommaAfter + 3;
					}
				sReturn = sReturn + sVar.charAt(i);
			}
		return sReturn;
	}

function cleanCommas(s) 
	{
		var workSum = s;
		iReturn = workSum.replace(/,/g, "");
		return iReturn;
	}

function validate(source) 
	{
		// strip the old commas and add new ones
		eval('var sum = document.demonstration.' + source + '.value');
		var cleanSum = cleanCommas(sum);
		result = insertCommas(cleanSum);
		eval ("document.demonstration." + source + ".value = result");
		return true;
	}

 

[mwolf00]

does this work better?

<input id="myInput" onKeyUp="addComma(this)">
<script>
	function addComma(inObj){
		outStr =inObj.value.replace(/,/g, "");
		leftStr = outStr
		rightStr = ""
		if (outStr.indexOf(".") > -1){
			leftStr = outStr.substr(0, outStr.indexOf("."))
			rightStr = outStr.substr(outStr.indexOf(".")+1)
		}
		if (leftStr.length > 3){
			numCommas = Math.floor(( leftStr.length - 1 ) / 3 );
			tempStr = ""
			for (x=0; x<numCommas; x++){
				tempStr =  "," + leftStr.substr(leftStr.length-3) + tempStr
				leftStr = leftStr.substr(0,leftStr.length-3)
			}
		 	leftStr += tempStr 
		}
		outStr = outStr.indexOf(".") > -1 ? leftStr + "." + rightStr : leftStr
		inObj.value = outStr		
	}
	
</script>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

Tsuna​

 

[SpeedyDuh]

It is more elegantly packaged and works like my script.
Problem is that when i press key and enter 4th value (4), string '1234' is sent to addComma() and when it returns string '1,234' the string is suddenly 5 characters long.
The blinking cursor doesn't realize this and the cursor stays between 3 and 4 and not in the end. If i enter 5 to the string, it goes between 3 and 4 and i get string '12,354'. Puzzling isn't it =/
On IE and Firefox the cursor follows the end of the string even when it gets modified in fly.

 

[SpeedyDuh]

This seems like a hairy problem so i've been thinking alternative solutions..
Would it be possible to feed in "right arrow" pressed signal to the web page from the javascript? So that when i press 4, the script notices this as it's getting onKeyUp in anyway, then at the end of the script after textarea contents are filled back to the page with commas in right places, it is also receives "right arrow pressed" so it stays at the end of the string..

It would introduce a new problem of checking that when user actually presses the arrow keys to move around this event wouldnt be triggered. Else moving around the textarea becomes impossible.. Is this even possible or am i way off the limits of technology?