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

   
Vista:

aumentar ancho de un input conforme metemos caracteres en el

Publicado por sam (95 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 claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Manuel

aumentar ancho de un input conforme metemos caracteres en el

Publicado por Manuel (5 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 claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

aumentar ancho de un input conforme metemos caracteres en el

Publicado por sam (95 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Manuel

aumentar ancho de un input conforme metemos caracteres en el

Publicado por Manuel (5 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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

aumentar ancho de un input conforme metemos caracteres en el

Publicado por Sam (95 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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

aumentar ancho de un input conforme metemos caracteres en el

Publicado por xve (1595 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

aumentar ancho de un input conforme metemos caracteres en el

Publicado por xve (1595 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Manuel

aumentar ancho de un input conforme metemos caracteres en el

Publicado por Manuel (5 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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar