<html>
  <body>
    <form>
      <input type="text" id="name">
      <button type="submit" id="submit">Submit</button>
    </form>
  </body>
</html>
body {
  height: 100vh;
  align-content: center;
}

form {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 300px;
  gap: 10px;
}

button {
  color: grey;
}

button.ready {
  background-color: blue;
  color: white;
}
const input = document.getElementById("name");
const button = document.getElementById("submit");

input.addEventListener("keydown", (evt) => {
  requestAnimationFrame(() => {
    if (evt.target.value) {
      // expensive call, like doing a typeahead search
      setTimeout(() => {
        renderSearch(evt.target.value);
      }, 1);
      button.classList.add("ready");
    } else {
      button.classList.remove("ready");
    }
  });
});

// This simulates doing something really slow.
function renderSearch() {
  const el = document.createElement("div");
  for (var i = 0; i <= 1000; i++) {
    el.innerHTML = el.innerHTML + i;
  }
  return el;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.