Prevent horizontal “scrolling” of a text input?

Question

I am working on a format input field in html, css and js.

One example would be a date format field with following pattern: **.**.****. When I am typing

Answer 1

Webkit goes head over heels to show you what you are typing, even if you do css transformations it won't hide the text input caret.

It is also bad user experience to hide what you're typing, it would be very disconcerting and you wouldn't know if you typed it right.

I would suggest to limit the amount of characters you can put into each field, such as...

If your really need an arbitrary amount of characters, then you could listen for the keyup event on the field and then grow it dynamically.