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.
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.
Comment
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.
Parent comment
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.