¿Por qué Chrome ignora el atributo de "tamaño" de la entrada de texto?

Question

El siguiente atributo de tamaño no tiene ningún efecto en absoluto. ¿Por qué?

<input type="text" size="80" placeholder="blablabla bla lba bla bla bla blabla bla bla bla lba"> 

Por defecto tiene 60 caracteres y aparentemente no hay nada que pueda hacer para cambiar eso.

Answer 1

Presumiblemente tiene algún estilo que lo afecta. Sin reglas de estilo, es works just fine. Pero cuando aplica una regla de estilo con un tamaño más pequeño, that takes precedence.

Para averiguar qué regla de estilo le está afectando, haga clic con el botón derecho y seleccione "Inspeccionar elemento" y luego observe la información de estilo que se muestra a la derecha.

Answer 2

utilizar un elemento textarea en lugar del elemento input:

<textarea cols="80" rows="1" style="overflow: visible" placeholder= 
"blablabla bla lba bla bla bla blabla bla bla bla lba"></textarea> 

Esto produce más consistente, aunque no completamente prestación consistente. La configuración overflow: visible está ahí para hacer que IE reserve espacio para 80 caracteres, de lo contrario solo 79 se ajustarán, debido a la barra de desplazamiento vertical.

¿Por qué aparece el problema con input:

El atributo size="80" define la anchura visible del campo a la anchura “promedio” de 80 caracteres. Esto no está exactamente definido (¿qué "promedio"?), Y los navegadores lo implementan de manera ilógica: el uso de size="80" tiende a dar considerablemente menos ancho que 4 veces el ancho predeterminado de 20 caracteres. Entonces el navegador ni siquiera es consistente. La proporción depende de la fuente y del navegador. (Esto sucede en otros navegadores también.)

Si necesita seguir usando input:

Usted podría utilizar style="width: 80ch", pero no todos los navegadores soportan esta característica CSS3, y no hay garantía de que se ha implementado correctamente. La unidad ch es por definición el ancho de avance del dígito cero, '0', que en la mayoría de las fuentes es igual al ancho de avance de los dígitos en general. (Por ejemplo, Firefox lo implementa casi correctamente. Casi, pero no del todo.)

Puede establecer la fuente en los elementos <input> en alguna fuente monoespaciada. Esto no elimina el problema, pero hace que los anchos estén más cerca de los anchos especificados.

Answer 3

A partir de Goggle Chrome 26 en Mac OS Lion, la unidad "ch" no es compatible. En un elemento inspeccionado con estilo en línea "ancho: 16ch", el estilo se marca como "Valor de propiedad no válido". Se aceptan bien otras unidades comunes (pt, px, em,%).

Answer 4

Si usted se pregunta por qué se puede introducir 60 caracteres, la propiedad que determina que el número de caracteres se llama maxlength:

MaxLength

Si el valor de la El atributo tipo es texto, correo electrónico, búsqueda, contraseña, tel o url, este atributo especifica la cantidad máxima de caracteres (en puntos de código Unicode) que el usuario puede ingresar; para otros tipos de control, se ignora. Puede exceder el valor del atributo de tamaño. Si no se especifica, el usuario puede ingresar un número ilimitado de caracteres.Especificar un número negativo da como resultado el comportamiento predeterminado; es decir, el usuario puede ingresar un número ilimitado de caracteres. La restricción se evalúa solo cuando se ha cambiado el valor del atributo.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Tamaño sólo determina el ancho en caracteres, no los usuarios cantidad puede entrar.

Answer 5

Tuve el mismo problema y después de probar muchas otras soluciones, lo arreglé agregando un ancho a los campos de entrada.

input { 
    width:90px; /* Your width may vary */ 
}