7

Tengo dos input separados por un <hr>, uno en la parte superior (con id="nombre") y otro en la parte inferior (con id="txt").

A medida que escribo en el input superior, se va escribiendo lo mismo en el input inferior, esto sucede en tiempo real.

El problema está en que, el input inferior debería tener un ancho dinámico, dependiendo de la cantidad de caracteres en su interior, pero solamente funciona si hago clic en dicho input (inferior).

function resizable(el, factor) {
  var int = Number(factor) || 7.7;

  function resize() {
    el.style.width = ((el.value.length + 1) * int) + 'px'
  }
  var e = 'keyup,keypress,focus,blur,change'.split(',');
  for (var i in e) el.addEventListener(e[i], resize, false);
  resize();
}
resizable(document.getElementById('txt'), 7);

function fAgrega() {
  document.getElementById("txt").value = document.getElementById("nombre").value;
}
body {
  text-align: center;
  padding: 20px
}

input {
  min-width: 30px!important;
  max-width: 200px!important;
  transition: width 0.25s;
  text-align: center;
}
Ingrese su nombre: <input id="nombre" type="text" onkeyup="fAgrega();" />

<hr> ¡Hola <input id="txt" type="text" class="preview_txt" onchange="resizable()" placeholder="you" />! Nos alegra tenerte aquí de nuevo.

Lo que intenté fue asignar la función del ancho dinámico con un evento onchange, para que el evento se ejecute cuando el usuario cambie el contenido del campo de entrada o input. Claramente no funciona. ¿Alguna idea?

Muchas gracias!

PD: Código en el que me basé.

1 respuesta 1

6

2 cosas:

  1. Siempre verifica que tengas un punto y coma al final de cada línea en javascript.

  2. Si el evento de resize se tiene que dar en cada cambio del txt que tiene un onkeyup event, por lo tanto, dentro de esa función debe estar el resize.

Ejecuta el siguiente código:

function resizable(el, factor) {
  var int = Number(factor) || 7.7;

  function resize() {
    el.style.width = ((el.value.length + 1) * int) + 'px';
  }
  var e = 'keyup,keypress,focus,blur,change'.split(',');
  for (var i in e) el.addEventListener(e[i], resize, false);
  resize();
}
resizable(document.getElementById('txt'), 7);

function fAgrega() {
  document.getElementById("txt").value = document.getElementById("nombre").value;
  var element = document.getElementById("txt");
  resizable(element);
}
body {
  text-align: center;
  padding: 20px
}

input {
  min-width: 30px!important;
  max-width: 200px!important;
  transition: width 0.25s;
  text-align: center;
}
Ingrese su nombre: <input id="nombre" type="text" onkeyup="fAgrega();" />

<hr> ¡Hola <input id="txt" type="text" class="preview_txt"  placeholder="you" />! Nos alegra tenerte aquí de nuevo.

4
  • 1
    El pistolero más rápido del desierto! Gracias fredyfx <3
    – LauraZ
    Commented el 23 ago. 2019 a las 22:06
  • 2
    En el desierto no hay gente xD!!!! Vale, con cariño Laura :3, que te vaya cheeere :D a seguir con todo el power 2.0!!!
    – fredyfx
    Commented el 23 ago. 2019 a las 22:13
  • quería decir del oeste jajaja me siento avergonzada
    – LauraZ
    Commented el 26 ago. 2019 a las 14:59
  • hahahahaha xD!!! lo sé :v descuida, es broma :D
    – fredyfx
    Commented el 26 ago. 2019 a las 17:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.