HTML onbeforeinput Event Attribute - Playground Example

<!DOCTYPE html>
<html>
<body>

  <h3>Price Input (Numbers Only)</h3>
  <p>Try typing letters inside this box:</p>
  
  <input type="text" id="numericInput" placeholder="0.00">

  <script>
    const input = document.getElementById('numericInput');

    input.addEventListener('beforeinput', (event) => {
      // Check if the data being inserted is NOT a number
      if (event.data && isNaN(event.data)) {
        // This stops the character from ever appearing in the box
        event.preventDefault(); 
        alert("Only numbers are allowed!");
      }
    });
  </script>

</body>
</html>