Home / Questions / 287854
Accepted
LauraZ
Asked: 2020-08-24 13:50:05 +0800 CST 2020-08-24 13:50:05 +0800 CST

Input with dynamic width does not update automatically

  • 772

I have two inputseparated by a <hr>, one at the top (with id="nombre") and one at the bottom (with id="txt").

As I write in the inputupper one, the same is being written in the inputlower one, this happens in real time.

The problem is that the inputbottom should have a dynamic width, depending on the number of characters inside it, but it only works if I click on said input(bottom).

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.

What I tried was to map the dynamic width function with an event onchange, so that the event is executed when the content of the input field is changed by the user or input. It clearly doesn't work. Any ideas?

Thank you very much!

PS: Code I based on .

javascript

1 Answers

  1. Best Answer

    2 things:

    1. Always check that you have a semicolon at the end of each line in javascript.

    2. If the resize event has to occur in each change of the txt that has an onkeyup event, therefore, within that function there must be the resize.

    Run the following code:

    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;
  var element = document.getElementById("txt");
  resizable(element);
}
    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"  placeholder="you" />! Nos alegra tenerte aquí de nuevo.

    • 6