Prevent horizontal "scrolling" of a text input?
I had the same issue and found a CSS solution:
#input-wrapper { border: 1px solid #C9CFD5; background-image: url('grid.png'); /* some tile image for the vertical lines */ width: 200px; height: 50px; overflow: hidden; } #input-wrapper input { border: 0 none; width: 400px; height: 50px; background: transparent; font-size: 30px; font-family: "Courier", monospace; letter-spacing: 28px; text-indent: 18px; }<div id="input-wrapper"> <input type="text" maxlength="4" length="4" value="1234" /></div>Have fun!
Thanks for the advise with the wrapper, I had the same problem in firefox.In Chrome I fixed it using JS and the scrollLeft method (which will not work in ff on the other hand).In jQuery:
$('input').live('keyup', function() { $(this).parent().scrollLeft(0);});
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...
<input type="text" maxlength="20" />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.