mmm when I type in my desktop your demo works Ok. But, in my celular (htc sense with firefox beta, with hardware keyboard) I have to type FN + number. When I type '12345' the caret moves to the begining of the '5', so when I type '6' the result is '1234 65'
I would suggest you apply the formatting on lost focus, because the interaction with the caret is a very hard task. try this on desktop:
1. type "12345678" (the field shows '1234 5678' ) 2. place the caret at the begining of field 3. type "12345678" (the field shows '1123 4567 8234 5678' , when I expect '1234 5678' 1234 5678' )
As you can see, the caret changes after the 2nd '1', going to the end of input. This is an unexpected behavior, and a hard problem to solve. You'd have to track current/after caret position. I can't remember if that can be done in javascript.
What about something like onkeyup? I like the idea of changing it as you type because then it's easier to see a long list of strings you've typed in so far.
Comment
I don't understand. What's not working? The fifth input should be preceded by space. I don't see anything there being incorrect.
Parent comment
when i type numbers, the fifth char inserts a space, but the caret places in the fourth position. the sixth char places incorrectly. just my two cents
Replies
mmm
when I type in my desktop your demo works Ok.
But, in my celular (htc sense with firefox beta, with hardware keyboard) I have to type FN + number.
When I type '12345' the caret moves to the begining of the '5', so when I type '6' the result is '1234 65'
I see. That's frustrating.
I'll talk to the people who work on that and try to figure out if it's a bug in Firefox or a bug in my code.
I would suggest you apply the formatting on lost focus, because the interaction with the caret is a very hard task. try this on desktop:
1. type "12345678" (the field shows '1234 5678' )
2. place the caret at the begining of field
3. type "12345678" (the field shows '1123 4567 8234 5678' , when I expect '1234 5678' 1234 5678' )
As you can see, the caret changes after the 2nd '1', going to the end of input. This is an unexpected behavior, and a hard problem to solve. You'd have to track current/after caret position. I can't remember if that can be done in javascript.
What about something like onkeyup? I like the idea of changing it as you type because then it's easier to see a long list of strings you've typed in so far.
Surely it must be a bug in Firefox Android that the caret isn't at the end even if the input value is changed in async events.
At least it works on iOS Safari. I just tested that.