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

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

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!

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

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