JavaScript - aumentar ancho de un input conforme metemos caracteres en el

aumentar ancho de un input conforme metemos caracteres en el

Publicado por sam (106 intervenciones) el 28/02/2015 19:14:32

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.

gracias de antemano

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 146

Val: 17

aumentar ancho de un input conforme metemos caracteres en el

Publicado por Manuel (10 intervenciones) el 28/02/2015 21:01:13

No es algo que haya hecho nunca... pero supongo que si controlas el evento onChange del input, pues con JavaScript vas viendo con lenght la cantidad de caracteres y dependiendo de ese valor, pues usando style pues das más o menos tamaño al input. Y si no te entendí bien y lo que quieres cambiar es el size, pues algo similar. Eso si, el resultado quedaría mejor si la fuente usada para el input fuera de tipo monospace.

A ver si mañana te hago el código y te lo subo. Pero con la idea que te comenté supongo que así se pude... aunque seguramente hay formas más fáciles de lograrlo.

hasta luego

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

aumentar ancho de un input conforme metemos caracteres en el

Publicado por sam (106 intervenciones) el 01/03/2015 11:37:20

gracias por ayudarme , mira he encontrado este codigo pero no me va y creo que podria valer:

<script>

    document.querySelector(".nombre").addEventListener("keyup", function(event){

        if (this.value.length > 24 && event.keyCode != 8){

            //Aumento 7.75 píxeles al ancho de la caja

            this.style.width = parseInt(getComputedStyle(this).width) + 7.75 + "px";

        if (this.value.length > 24 && event.keyCode == 8){

            //Disminuyo 7.75 píxeles al ancho de la caja

            this.style.width = parseInt(getComputedStyle(this).width) - 7.75 + "px";

    }, false);

</script>

<input type="text" name="nombre" class="nombre" width="100px"/>

Valora esta respuesta

Comentar

Pos: 146

Val: 17

aumentar ancho de un input conforme metemos caracteres en el

Publicado por Manuel (10 intervenciones) el 01/03/2015 18:32:33

Bueno, veo que al final encontraste otro código... yo también te preparé un código:
http://tinyurl.com/nyfllx5

A ver si es lo que buscabas. Más o menos hace lo mismo que el que tu has puesto ya, pero creo que lo entenderás mejor.

En funcionamiento en esta dirección: http://administrador.neocities.org/JS/Inputcrecetecla.html

Valora esta respuesta

Comentar

aumentar ancho de un input conforme metemos caracteres en el

Publicado por Sam (106 intervenciones) el 03/03/2015 10:11:27

muchas gracias por la ayuda. me gusta mas el codigo que me has proporcionado tu.

Es lo que andaba buscando muchas gracias fenomeno!!!

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

aumentar ancho de un input conforme metemos caracteres en el

Publicado por xve (2100 intervenciones) el 03/03/2015 11:22:15

Hola Manuel, el código esta muy bueno!!!

El problema que veo, es que si lo ejecutamos con una fuete que no sea monospace no funciona correctamente.

<!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>

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

aumentar ancho de un input conforme metemos caracteres en el

Publicado por xve (2100 intervenciones) el 03/03/2015 11:23:07

Aquí he encontrado un ejemplo que puedes utilizar con cualquier fuente utilizando canvas para saber la anchura de la fuente.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>INPUT que crece</title>

    <script type="text/javascript">

/**

        * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.

        * @param {String} text The text to be rendered.

        * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").

        * @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393

*/

        function getTextWidth(text, font) {

            // re-use canvas object for better performance

            var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));

            var context = canvas.getContext("2d");

            context.font = font;

            var metrics = context.measureText(text);

            return metrics.width;

};

        function ajustar() {

            var texto=document.getElementById("idtxt");

            var tamano=parseInt(getTextWidth(texto.value, "12pt arial"));

            console.log(tamano);

            texto.style.width=(tamano+1)+"px";

    </script>

    <style type="text/css">

        input {

            font-family: Arial;

            font-size:12pt;

    </style>

   </head>

   <body>

    <form name="elFormulario">

        <input type="text" id="idtxt" name="elTexto" onKeyUp="ajustar()" value="texto inicial"></input>

    </form>

   </body>

</html>

Espero que te sirva.

Valora esta respuesta

Comentar

Pos: 146

Val: 17

aumentar ancho de un input conforme metemos caracteres en el

Publicado por Manuel (10 intervenciones) el 03/03/2015 15:43:45

gracias a vosotros...
+100 Flipante tu código xve, ni me ve había pasado por la cabeza usar canvas para calcular el tamaño del texto y así aplicarlo al input.

Valora esta respuesta

Comentar

Detectar choque entre circulos canvas HTML5

Eliminar rutas intermedias en geolocalización html