HTML: ajustar ancho de un input al contenido de forma dinámica con JavaScript
Esto es una respuesta a una pregunta publicada en La Web del Programador, la pregunta concreta es:
Por si no se lee bien la imagen:
Una pregunta, estoy haciendo un formulario, y me gustaria saber, si es posible hacer que los campos inputs aumenten su ancho conforme se vayan introduciendo mas caracteres dentro de ellos.
Si es asi alguien me podria indicar algun enlace para verlo.
o como podria hacerlo mediante javascript o jquery ,no se.
es que estoy investigando y no encuentro nada en este sentido.
¿Es posible lo solicitado? La respuesta es un rotundo SI y es posible de varias formas.
Pero no todo lo que es posible es recomendable. El resultado es más que mejorable y si lo que quieres es dar opción a introducción de texto largo, pues debes recurrir a un textarea y no un input type=”text”. Y después, si quieres que el resultado no sea horroroso, pues tienes que usar una fuente de tipo monospace, que son las fuentes en donde todas las letras ocupan lo mismo.
Como se hace:
Lo que voy a poner es la solución más sencilla y de la forma que lo entienda uno que lleve 1 día estudiando JavaScript, pero en la práctica, muchos en lugar de poner el controlador de evento directamente en el campo input, que es lo más didáctico. En la práctica, pues hoy en día lo usual es programar el manejador directamente en AddEventListener o si usáis JQuery/Zempto con $(‘#elinput’).on(‘keyup’,function() {…});
El código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>INPUT que crece</title>
<script type="text/javascript">
function ajustar() {
var texto=document.getElementById("idtxt");
var txt=texto.value;
var tamano=txt.length;
tamano*=8.1; //el valor multiplicativo debe cambiarse dependiendo del tamaño de la fuente
texto.style.width=tamano+"px";
}
</script>
<style type="text/css">
input {
width:8em;
font-family: monospace;
}
</style>
</head>
<body>
<form name="elFormulario">
<input type="text" id="idtxt" name="elTexto" onKeyUp="ajustar()" value="texto inicial"></input>
</form>
</body>
</html>
La explicación:
Se usa el evento onkeyUp, porque es el que se produce cuando se suelta la tecla y por tanto ya está escrita una nueva letra.
En el CSS, pues establezco una fuente monospace y doy un ancho inicial. Valor que depende del contenido de texto inicial, si no lo hay, pues a gusto del usuario… eso no afecta al resto de la función.
La función lo que hace es, dependiendo de la cantidad de caracteres que hay escritos en el input, pues calcula el tamaño que tiene que tener para poder mostrar todo el contenido y establece ese tamaño. Y esto lo hace por cada tecla pulsada.
En tamano*=8.1: previamente en la variable tamano guardo la cantidad de caracteres y después, como es una fuente monospace, pues multiplico ese valor por el tamaño necesario de pixels para que quepa todo. En este caso es 8.1, pero dependiendo tamaño de la fuente hay que subir o bajar ese factor multiplicativo.
Para finalizar, simplemente establezco el nuevo ancho en pixels (px).
Para finalizar, hay que comentar, que no todos los navegadores el resultado es exacto… por ejemplo, en Chrome ese factor multiplicativo es algo excesivo y va generando una zona no usada al final, pero en Internet Explorer es muy justo. En cambio cogemos un tercer navegador, por ejemplo QTWeb y el resultado es perfecto con ese factor multiplicativo.
Para el que quiera ver ese código y probarlo directamente en el navegador:
Comentarios
Publicar un comentario