Disable horizontal "scrolling" of text input?

Question

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

One example is a date format field with the following pattern: **.**.**** . When I type in the input fields, Chrome “scrolls” to the left when I get to the end of the window.

How can I prevent this?

The lines dividing each char are created by the background image. With a monospace font and a set of letter-spacing each character goes into a "field". If you reach the size of the input field, it scrolls forward and takes the background with it.

To fix this problem, I placed the input element in the div element, limited the div element to the width and added borders and overflow: none; in the div. Result: it works fine in Firefox, Chrome still scrolls the input content to the left.

Am I doing it wrong? Is there any other solution for this? Is there a -webkit property to prevent this? Thank you in advance!

Answer 1

I had the same problem and I found a solution for CSS:

 <style> #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; } </style> <div id="input-wrapper"> <input type="text" maxlength="4" length="4" value="1234" /> </div> 

Good luck

Answer 2

Thanks for the tip with the wrapper, I had the same problem in firefox. In Chrome, I fixed it with 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); }); ...

Answer 3

Webkit switches to heels to show you what you are printing, even if you are doing css conversions, it will not hide text input.

It is also a bad user interface to hide what you are typing, it would be very unpleasant, and you would not know if you typed it correctly.

I would suggest limiting the number of characters that you can put in each field, for example ...

 <input type="text" maxlength="20" /> 

If you really need an arbitrary number of characters, you can listen to the keyup event on the field and then grow dynamically.

Answer 4

I used the following solution:

HTML

 <div id="input-wrapper"> <div id="input-grid"> <input type="text" id="targa" maxlength="5" length="5" value="" /> </div> 

Js

 jQuery(document).ready(function($){ $('#targa').on('keypress', function() { if (this.value.length >= 4){ return false; } }); }); 

CSS

  #input-wrapper { position: relative; } #input-grid{ border: 1px solid #C9CFD5; background-image: url('../images/input-mask.jpg'); width: 200px; height: 50px; } #targa { color:#fff; text-transform:uppercase; border: 0 none; width: 400px; height: 50px; background: transparent; font-size: 30px; font-family: "Courier", monospace; letter-spacing: 28px; text-indent: 18px; outline: 0; position: absolute; top: 0; left: 0; } 

Jsfiddle live example

Jsfiddle live example (full screen)