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

Have fun!