У меня есть два input
отделенные одним <hr>
, один в верхней части (с id="nombre"
) и другой в нижней части (с id="txt"
).
По мере того, как я пишу в input
начальник, пишется то же самое в input
нижний, это происходит в реальном времени.
Проблема, - в котором, input
нижний у него должна бы быть динамическая ширина, в зависимости от количества символов в Вашем внутреннем помещении, но только функционируй, если я нажимаю на выражение input
(нижний).
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.
То, что я попробовал, состояло в том, чтобы распределять функцию динамической ширины с событием onchange
, для того, чтобы событие работало, когда пользователь изменит контент поля ввода или input
. Ясно оно не функционирует. Какая-то идея?
Большое спасибо!