¿Evita el "desplazamiento" horizontal de una entrada de texto?

Question

Estoy trabajando en un campo de entrada de formato en html, css y js.

Un ejemplo sería un campo de formato de fecha con el siguiente patrón: **.**.****. Cuando escribo en los campos de entrada, Chrome "se desplaza" hacia la izquierda cuando llego al final del cuadro.

¿Cómo puedo evitar esto?

Las líneas que separan cada carbón se hacen una imagen de fondo. Con una fuente monoespaciada y un conjunto letter-spacing, cada personaje entra en un "campo". Si alcanza el tamaño del campo de entrada, se desplaza hacia adelante y toma el fondo con él.

Para resolver este problema, puse el elemento de entrada en un elemento div, limité el elemento div a un ancho y agregué bordes y overflow: none; al div. El resultado: funciona bien en Firefox, Chrome todavía desplaza el contenido de entrada a la izquierda.

¿Estoy haciendo esto mal? ¿Hay alguna otra solución para eso? ¿Hay una propiedad de "webkit "para evitar esto? ¡Gracias de antemano!

Answer 1

Webkit va a la zaga para mostrarle lo que está escribiendo, incluso si realiza transformaciones CSS no ocultará la entrada de texto.

También es una mala experiencia de usuario ocultar lo que está escribiendo, sería muy desconcertante y no sabría si lo escribió correctamente.

sugeriría a limitar la cantidad de caracteres que se pueden poner en cada campo, como por ejemplo ...

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

Si su realmente necesita una cantidad arbitraria de caracteres, entonces se podría detectar el evento keyup en el campo y luego crecer de forma dinámica.

Answer 2

Gracias por el consejo con el contenedor, tuve el mismo problema en Firefox. En Chrome lo arreglé usando JS y el método scrollLeft (que no funcionará en ff por otro lado). En jQuery: $('input').live('keyup', function() { $(this).parent().scrollLeft(0); }); ...

Answer 3

que tenían el mismo problema y encontrar una solución 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> 

Que se diviertan!

Answer 4

he utilizado la siguiente solución:

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)