Вопросы Теги

Неудар в лунку с динамической шириной не обновляет автоматически

У меня есть два 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. Ясно оно не функционирует. Какая-то идея?

Большое спасибо!

PD: Код, на котором я основался.

7
задан 24.08.2019, 00:57
0 ответов