En mi HTML, tengo una serie de entradas. El usuario debe poder ingresar solo un carácter en cada uno. Aquí está su HTML:

<input class = "green" type="text" maxlength="1" />

El CSS para esto es el siguiente:

 input { font: 1.5em "Times New Roman", Times, serif; width:0.9em; height: 0.9em; text-align:center; } .green { color: green; }

Si el usuario ingresa un carácter y luego intenta ingresar otro, no debería pasar nada. Sin embargo, en mi diseño, el usuario puede ingresar cualquier cantidad de caracteres, aunque los caracteres anteriores se desplazan hacia la izquierda y solo se ve el último carácter. Cuando el enfoque deja el campo de entrada, todos los caracteres adicionales desaparecen y solo queda el primer carácter de entrada. ¿Cómo puedo asegurarme de que cuando el usuario intente ingresar caracteres adicionales, se ignoren y no suceda nada?