I would generally always opt for the simplest solution. In this case, one single field for the user to type into.
With split fields, such as the 4-box one you propose it adds in an extra cognitive load to the user.
- "Do I need to manually jump to each field?"
- "Will the system do it for me?"
- "What if I hit
tab myself but the form automatically jumped - will it have jumped into the 3rd field instead...?"
All these extra questions - perhaps subconciously, perhaps more forefront in their minds - are not questions that would even be considered in a single field form.
Sure, 4-field options aid readability - so if the user entered their number wrong it's easier for them to re-read their entry to see what area they did wrong. But this can still be mitigated in a single field. Just as you showed above, you can render the user input with spaces in the single field.
Another consideration is mobile users. While it may well be simple on a desktop, a mobile has a keyboard it needs to open and close on entry of the field. Different devices and OS's behave differently, but it's quite likely that on the jump from field 1 to field 2 the keyboard will autoclose and autoopen, causing a jarring flash on screen, with the user possibly trying to click the 5th digit just as the keyboard closes, thereby moving the cursor into another area of the screen altogether, or just missing that digit from entry altogether.
This mobile issue is illustrated nicely on Baymard blog, where they also point out that mobile users tend to manually press into each field - something desktop users don't do as often.
Your proposal is a nice idea, but I think it falls into the category of 'overengineering'. Unless you're noticing significant user input errors on a single field I don't think you need to introduce an alternative. You could risk decreasing the usability instead of improving it.