Mask Input to insure decimal and 2 positions

[rrl]

Hi, I have a text input that will default to "0.00".

However, entries can be for a length of 15 and must include a decimal with 2 positions (hundredths)...

How can I force this and prevent 14/15 positions with no decimal being used or a decimal mis placed giving more positions beyond 2 to the right of the decimal?

Your response is appreciated
-Ron :)

[cg9com]

why not just seperate it, with an input on one side, a . in the middle and an input on the other side, you can use size="" and maxlength="" to help you customize a little more


<input type="text"> . <input type="text">


something like that, any help? or did you want it all in the same input? i cant think of a way to have one static character in an input, but maybe a js guru can help you more

[Danne]

If you still want it in the same input, you can solve it by using the onKeyDown event and a function to validate the input. Something like this;





<script>

function doCheck()
{
var i,exceptions=[8,46,37,39,13,9]; // backspace, delete, arrowleft & right, enter, tab
var isException=false;
var isDot=(190==event.keyCode); // dot
var k=String.fromCharCode(event.keyCode);

for(i=0;i<exceptions.length;i++)
if(exceptions[i]==event.keyCode)
isException=true;

if(isNaN(k) && (!isException) && (!isDot))
event.returnValue=false;
else{
var p=new String(currency.value+k).indexOf(".");
if((p<currency.value.length-2 || isDot) && p>-1 && (!isException))
event.returnValue=false;
else if(currency.value.length>=15 && (!isException))
event.returnValue=false;
}
}

</script>

<input id="currency" type="text" onKeyDown="doCheck();">




However the validation will probably not work if the user changes the cursor position inside the input.

[whammy]

Instead of masking this type of input (which you can do to a point, but would still have to validate), I would just validate the input against something resembling a currency regular expression onsubmit.


function isTwelveDecFloat(num) {
return /^\d+(\.\d{12})?$|^\.\d{12}$/.test(num) && num.length < 16;
}


Didn't test it, but I think that will work...

:D

[shardulm]

//works only with IE for the obvious reasons.

function maskInputTo(inputElement, maxLength, decimalPlaces) {
var i,exceptions=[8,46,37,39,13,9]; // backspace, delete, arrowleft & right, enter, tab
var isException=false;
var isDot=((190==event.keyCode)&&(new String(inputElement.value).indexOf(".")<=0)) ; // dot
var k=String.fromCharCode(event.keyCode);
//alert(event.keyCode);
var sel, rng, r2, curPos=-1;


if(typeof inputElement.selectionStart=="number") {
curPos=inputElement.selectionStart;
} else if(document.selection && inputElement.createTextRange) {
sel=document.selection;
if(sel) {
r2=sel.createRange();
rng=inputElement.createTextRange();
rng.setEndPoint("EndToStart", r2);
curPos=rng.text.length;
}
}

for(i=0;i<exceptions.length;i++)
if(exceptions[i]==event.keyCode)
isException=true;

if(isNaN(k) && (!isException) && (!isDot))
event.returnValue=false;
else {
var p=new String(inputElement.value+k).indexOf(".");

if(((p<inputElement.value.length-decimalPlaces && curPos>p) || isDot) && p>-1 && (!isException))
event.returnValue=false;
else if(inputElement.value.length>=((p>-1)||isDot?maxLength+1:maxLength) && (!isException))
event.returnValue=false;
else if (decimalPlaces==0 && isDot)
event.returnValue=false;
}
}

//Send me a thank you email if you find this function useful. It will keep me //motivated.

[shardulm]

Hi, I have a text input that will default to "0.00".

However, entries can be for a length of 15 and must include a decimal with 2 positions (hundredths)...

How can I force this and prevent 14/15 positions with no decimal being used or a decimal mis placed giving more positions beyond 2 to the right of the decimal?

Your response is appreciated
-Ron :)

Here you go...


function maskInputTo(inputElement, maxLength, decimalPlaces) {
var i,exceptions=[8,46,37,39,13,9]; // backspace, delete, arrowleft & right, enter, tab
var isException=false;
var isDot=((190==event.keyCode)&&(new String(inputElement.value).indexOf(".")<=0)) ; // dot
var k=String.fromCharCode(event.keyCode);
//alert(event.keyCode);
var sel, rng, r2, curPos=-1;


if(typeof inputElement.selectionStart=="number") {
curPos=inputElement.selectionStart;
} else if(document.selection && inputElement.createTextRange) {
sel=document.selection;
if(sel) {
r2=sel.createRange();
rng=inputElement.createTextRange();
rng.setEndPoint("EndToStart", r2);
curPos=rng.text.length;
}
}

for(i=0;i<exceptions.length;i++)
if(exceptions[i]==event.keyCode)
isException=true;

if(isNaN(k) && (!isException) && (!isDot))
event.returnValue=false;
else {
var p=new String(inputElement.value+k).indexOf(".");

if(((p<inputElement.value.length-decimalPlaces && curPos>p) || isDot) && p>-1 && (!isException))
event.returnValue=false;
else if(inputElement.value.length>=((p>-1)||isDot?maxLength+1:maxLength) && (!isException))
event.returnValue=false;
else if (decimalPlaces==0 && isDot)
event.returnValue=false;
}
}

[bruce.yang]

Hi -
can you provide a sample line on how you would call this java script function for a text box control in a C# .net method?

Thanks,
Bruce