...

View Full Version : Please help me, simple input mask 00.00



brumshine
05-18-2009, 04:07 PM
I've been trying to figure this one out for hours, any help is much appreciated.

I need an input mask of 00.00

I would like to allow only numbers and set a fixed length of 5 characters including the decimal.

This code only needs to work with internet explorer.

If the user types a 1 it should read 00.01

If the user type a4b3c it should display 00.43

If the user types 4321 it should display 43.21

If the user types 987654321 it should display 98.76

Thanks guys,
brumshine

ShadowIce
05-18-2009, 04:41 PM
Use Frontpage.

brumshine
05-18-2009, 07:24 PM
Use Frontpage.

Many thanks for the thoughtful in depth response...

Philip M
05-18-2009, 08:00 PM
In fact what you are asking for is not at all simple, and the advice given by ShadowIce was perfectly sensible, although a little abrupt. Google for "Javascript input mask" and you will see that you will need something beyond basic Javascript for this.

The simplest solution is to validate the user's entry onblur, stripping non-digits and formatting as xx.xx (two digits, dot, two digits). Is this supposed to be a time??

brumshine
05-18-2009, 08:33 PM
I googled this issue many times before finally posting this thread, the only solutions I could find involve using external scripts such as dfilter or mootools.

This is not a time, it is a meter kwH reading.

One difficulty I've been running into is the fact that I would like the input to start on the right side of the box...

I really wouldn't think this would be that difficult, is it possible to do using the trim() or replace()?

Eldarrion
05-18-2009, 09:37 PM
Well, I guess one way to go about it would be:



<script type="text/javascript">
function mask() {
var masktext = document.getElementById("mask");
var input = masktext.value;
var input = input.match(/\d+/);
if (input == null)
masktext.value = "00.00";
else {
input = input.toString();
if (input.length == 1)
masktext.value = "00.0" + input;
else if (input.length == 2)
masktext.value = "00." + input;
else if (input.length == 3)
masktext.value = "0" + input.match(/\d/) + "." + input.match(/\d(\d+)/)[1];
else if (input.length == 4)
masktext.value = input.match(/\d\d/) + "." + input.match(/\d\d(\d+)/)[1];
else
masktext.value = input.match(/\d\d/) + "." + input.match(/\d\d(\d\d)/)[1];
}
}
</script>


As to the input starting on the right side... that is pure css.... in my case, the mark-up I'm using is:



<input style="text-align: right;" type="text" value="" id="mask" />
<input type="button" value="test" onclick="mask()" />


Have a look at how that goes for you.

Philip M
05-18-2009, 10:55 PM
Suggested improvement:-


function mask() {
var masktext = document.getElementById("mask");
var input = masktext.value;
input = input.replace(/[^0-9\.]/g,"");
input = input.match(/\d+/);

Old Pedant
05-19-2009, 03:47 AM
Actually, the poster never specified that the user *can* input a period.

Digits only, and accept only the first four. The period is always placed after the first two digits. This per the examples he gave.

Here's my stab at it:


<script>
function funny(what)
{
var v = parseInt( what.value.replace(/[^\d]/g,""), 10 );
if ( isNaN(v) ) v = 0;
if ( v > 9999 ) v = Math.floor( v / 10 );
v = "x" + (v + 10000);
what.value = v.substring(2,4) + "." + v.substring(4);
}
</script>
<body>
<form>
Try it here:
<input name="any_name_at_all" onkeyup="funny(this);">
</form>
</body>

brumshine
05-19-2009, 06:15 PM
You guys are great! I bow down to your leet coding skills. Hopefully someone else can find this helpful.

:)

adios
05-19-2009, 06:35 PM
OP ...

Yes, but because you're calling that onkeyup it exhibits the dreaded 'kwazy kursor' syndrome. Not very user-friendly.

Applied onblur, I broke it in about 15 seconds. I'm not sure the OP's criteria are realistic, as it's possible to write this various ways to suit the examples he posted, and still come up with gobbledygook for other input. Perhaps for some attempts, a clear rejection (with a prompt) would be more suitable?

Eldarrion
05-19-2009, 06:55 PM
OP ...

Yes, but because you're calling that onkeyup it exhibits the dreaded 'kwazy kursor' syndrome. Not very user-friendly.

Applied onblur, I broke it in about 15 seconds. I'm not sure the OP's criteria are realistic, as it's possible to write this various ways to suit the examples he posted, and still come up with gobbledygook for other input. Perhaps for some attempts, a clear rejection (with a prompt) would be more suitable?


Indeedy, took me less time to break it too... and still on key-up. Was going to comment how certain users will not react very well to typing something and having it change as they are typing, but I guess that goes into the 'user-friendly' part. Tested my own suggestion for a bit over 20 minutes yesterday with the onclick event and I didn't manage to break it. Sure, Pedant's solution is shorter, but I guess it's the OP's choice on what he wants done and how to achieve the result.

Old Pedant
05-19-2009, 09:53 PM
Well, if I were putting this on my *own* site, I would only use ONCHANGE.

Screw the people who type in "AS&.1XYZ3.44400NN". And I don't care if the person who types in "17" just sees "17" until he/she goes to next field.



<script>
function funny(what)
{
var v = "0000" + what.value.replace(/[^\d]/g,"").substring(0,4);
v = v.substring(v.length-4);
what.value = v.substring(0,2) + "." + v.substring(2);
}
</script>
<body>
<form>
Try it here:
<input name="any_name_at_all" onchange="funny(this);">
</form>
</body>


Yes, I noticed that I could break my original code. First time I tried it, actually. Decided it wasn't important as with reasonable typing speed it doesn't break, but have to admit it was sloppy solution.

adios
05-19-2009, 09:59 PM
'funny' is a reserved word in JavaScript. Brendan Eich's idea.

I don't think your solution was 'sloppy' - I'm just not sure if the ground rules originally specified are reasonable. Just giving some examples and desired outputs doesn't necessarily suggest a coherent algorithm.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum