Home > JavaScript, Mini-tips, Programación, Web > Cambiar el width de un input dependiendo de su entrada

Cambiar el width de un input dependiendo de su entrada

Hoy estaba mirando por la ventana, cuando repentinamente se me vino a la mente, jumm… por que no incrementar el ancho de un input dependiendo de la longitud de lo que se está escribiendo… entonces llegue a esto:

<input 
    onkeyup="this.style.width = this.value.length + 2 + 'ex';" 
    onkeypress="this.onkeyup();"/>

Es importante también definir en tu CSS los tamaños máximos y mínimos del input, para que no desaparesca ni tampoco cresca hasta el infinito de los infinitos

input{ min-width: 100px; max-width: 50ex;}

Y… pueden ver el ejemplo en jsfiddle

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: