How to call a function when textfield value change in Javascript?

Question

I want to change width of a textfield when user enters more than 17 characters in that textfield using Javascript (if possible) otherwise by any other means.

I wrote a code to do the same, but it only changes width when user click outside the textfield after entering more than 17 characters. I want it to change width automatically when user enters more than 17 characters :

function widen() {
  var value = nametf.value;
  if (value.length > 17) {
    nametf.style.width = '300px';
  } else {
    nametf.style.width = '200px';
  }
}

#nametf {
  width: 200px;
  height: 20px;
  padding: 5px 10px;
}

<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
  <input type="text" name="name1" id="nametf" onchange="widen()" value="" required>
</form>

[use the oninput event](https://www.w3schools.com/jsref/event_oninput.asp) — lordvlad30, Feb 11 '20 at 14:41
Does this answer your question? [Adjust width of input field to its input](https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input) — Taki, Feb 11 '20 at 14:42
there are many many questions on Stack Overflow regarding how to execute some Javascript upon text change. which of them have you tried and why specifically didn't they solve your particular problem? — Dan O, Feb 11 '20 at 14:45

Mr. Polywhirl · Answer 1 · 2020-02-11T14:56:46.950

You need to pass a self-reference to the function using this. I would also change on-change to on-key-up, because on-change waits for you to move focus away from the field.

onkeyup="widen(this)"

Then you need to parameterize the function with your variable "nametf"

function widen(nametf) {
  // ...
}

Example

function widen(nametf) {
  var value = nametf.value;
  if (value.length > 17) {
    nametf.style.width = '300px';
  } else {
    nametf.style.width = '200px';
  }
}

#nametf {
  width: 200px;
  height: 20px;
  padding: 5px 10px;
}

<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
  <input type="text" name="name1" id="nametf" onkeyup="widen(this)" value="" required>
</form>

A better approach would be to use em units to expand the text are based on the current value.

initExpandingFields();

function initExpandingFields() {
  Array.from(document.querySelectorAll('.expanding-field')).forEach(field => {
    field.addEventListener('keyup', onFieldChange);
  });
}

function onFieldChange(e) {
  let field = e.target,
      len   = field.value.length;
  field.style.width = (len * 0.667) + 'em';
}

#nametf {
  width: 200px;
  height: 20px;
  padding: 5px 10px;
}

<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
  <input type="text" class="expanding-field" name="name1" id="nametf" value="" required>
</form>

score 0 · Accepted Answer · answered Feb 11 '20 at 14:53

onchange gets activated when the input looses focus, that's why it works when you click outside. On the other hand oninput will be triggered immediately when the value changes:

const nametf = document.getElementById('nametf');
function widen() {
  var value = nametf.value;
  if (value.length > 17) {
    nametf.style.width = '300px';
  } else {
    nametf.style.width = '200px';
  }
}

#nametf {
  width: 200px;
  height: 20px;
  padding: 5px 10px;
}

<html>
<form method="get" action="wwhome.php">
  <input type="text" name="name1" id="nametf" oninput="widen()" value="" required>
</form>
</html>

score 0 · Answer 3 · answered Feb 11 '20 at 14:59

Try this:

var nametf = document.getElementById("nametf");

nametf.addEventListener("input", function(){
    if(nametf.value.length > 17) {
        nametf.size = "30";
        } else {
        nametf.size = "20";
        }
});

#nametf {
  height: 20px;
  padding: 5px 10px;
}

<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
  <input type="text" name="name1" id="nametf" size="20" value="" required>
</form>

How to call a function when textfield value change in Javascript?

3 Answers3

Example