Don't let to write a number greater than max attribute in input

document.querySelector("#maca").addEventListener("keydown", function(e) {
  if (e.target.value > this.getAttribute("max")) {
    e.preventDefault();
  }
})

<input type="text" name="maca" placeholder="maca" id="maca" max="7">

I'm trying to stop the user from entering a number greater than the value of the max attribute. What is happening is that first the user is allowed to write a larger number then not.

How can I fix this?

Thanks a lot!