Skip to main content
2 de 2
Agregar atribución al autor del código en el cual me baso
LauraZ
  • 882
  • 1
  • 7
  • 19

Input con ancho dinámico no actualiza de forma automática

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é.

LauraZ
  • 882
  • 1
  • 7
  • 19