I am trying to create a new html component using javascript and CSS.
The new component is exactly like TextField (<input type="text">).
The additional behaviour is each character in the TextField is separated in a box.
Is there any existing component available ? If not please give some ideas how to design this component.
i would use a series of input boxes with a character limit of 1 and use CSS to make them 'square-like' to accomodate just one character
Nothing exists in HTML for a multiple text input like you've described.
You'll need to build it yourself using multiple <input type="text"/> elements.
TextField(<input type="text"/><input type="text"/><input type="text"/>...)
Just out of interest though, why do you want this control? Typically this kind of field is horrible from a usability standpoint (even if you hook in event handlers to auto-tab you from one box to the next)
If you just want it to look like the characters are in boxes, you might be able to use a fixed-width font and a clever background graphic. Admittedly, this could pose some interesting internationalization challenges.