Correctly implementing auto-masking in a text input, and handling all the edge cases like pasting, cursor placement and deletion, etc -- is extremely hard.
Let's walk through your implementation, from a pure UX perspective. We'll start with the example in your gif:
- I want to enter 12 degrees, so I focus the input and press
1, I see:
Whoa! I wanted to to enter 12, not 1. Do I need to reposition the cursor with my mouse to add the 2? Hmmm... maybe I'll just try pressing 2 anyway:
Okay, that worked. Cool. A little weird, but okay...
- I'm getting the hang of it now: I type, you autoformat me. So I quickly type 34 now, but I mistype and enter 24, I see:
Crap. Okay, I can fix that. I put my cursor between the 2 and 4:
and press "delete":
Wtf!? I was trying to delete the 2, but it looks like the 4 got deleted, and the cursor jumped to the end again. Hmmm... okay, guess I should have deleted the entire 24 and retyped 34. Not a huge deal in this case, but what if I had typed out the entire thing and realized that it should have been
22 34 56 instead of
12 34 56. That would be annoying. I'd have to delete everything and retype it all.
Anyway, I think I see how this thing works now...
Next day I come back, and luckily I have today's entry,
234567, in my clipboard now, so I can paste it and avoid some typing. I paste it in, I see my numbers flash for a second, and then the input is blank again. Ugh, I guess I'll have to retype it all...
A separate point is that it's not indicated to the user the entry expects leading zeros (eg, with a placeholder example). So if I want to enter 1 degrees, 23 mintues..., I'll probably type a 1 and 2 before realizing my mistake, and I'll have to guess at how to fix it:
Here's a non-exhaustive list of things that "just work" in an ordinary text input, that you need to properly re-implement:
- Manual cursor placement with deletion and re-entry
- Manual highlighting and "retyping over"
- Pasting a full entry
- Partial pasting (meaning type in the first half, paste in the second)
- Partial pasting out of order (meaning type the whole thing, highlight the first half, or a middle part, then paste over -- the highlighted part should be correctly replaced with the pasted portion.
What does this all mean?
You probably shouldn't do this, and if you do, expect to spend a lot of time testing to get it right (we haven't even mentioned cross-browser differences yet).
Auto-tabbing (easier, but a bit tricky in itself) is one alternative, as others have mentioned. With some nice CSS to hide the text input borders, etc, you can make this look pretty good and closely mimic the experience you're attempting with the masking.
Use a single, default text input (raw), and show the user's formatted text next to it, above it, or below it. This is, admittedly, not as slick as a perfectly executed auto-masker would be, but it's much easier to get right, and much less likely to confuse or frustrate your user.
Use a well-tested library. Not sure if this one is perfect, and it requires jquery, but http://digitalbush.com/projects/masked-input-plugin/ addresses at least most of the concerns I've raised.