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

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!

Answer 2

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);
});

Answer 3

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)

Answer 4

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.