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!