rci
status: Work In Progress
new take for code inputs on the web.
Compared
 |
 |
 |
|---|---|---|
| DOM Input | multi-input pattern | rci |
rci uses a single DOM input element, most other implementations are based on multiple inputs.
Using multiple inputs gives out-of-the-box style consistency, but comes with the disadvantage of JS hacks to deal with focus shifiting, pasting, etc. It also prevents some ✨autocomplete magic:sparkles: from working, and might also be worse for acessibility.[citation needed]
Demo
TODO: add codesandbox link here
Caveats
The font used must either contain tabular lining(for numeric values) or be monospaced(for alphanumeric values), as the advances widths are assumed to be fixed.