JSFiddle - React, Tailwind, and code Playground

by algotree

HTML

<!DOCTYPE html>
<html>
<body>
    <h2>Accept decimal / float values</h2>

    <label>Enter Cost: </label>
    <input type="text" name="decimal_field" id="id_decimal_field" class="major_minor" 
            maxlength="20" onkeypress="return major_minor(event)"/>
    <br><br>
    <button onclick="DisplayCost()">Submit</button>
    <br>
    <p id="Cost"></p>

</body>
</html>

JavaScript

function major_minor(event) {
  if (event.key === 'Backspace' || event.key === 'Delete'
      || event.key === 'Tab' || event.key === 'Escape'
      || event.key === 'Enter' || event.key === '.'
      || event.key === 'ArrowLeft' || event.key === 'ArrowRight' ||
      isFinite(event.key)) {
    var decimal_str = document.getElementById("id_decimal_field").value;
    if (decimal_str.indexOf(".") != -1 && event.key === '.') {
      event.preventDefault();
    } else {
      // Accept the first dot(".")
      return;
    }
  } else {
    event.preventDefault();
  }
}

function DisplayCost() {
  document.getElementById("Cost").innerHTML = "Entered Amount: " + document.getElementById("id_decimal_field").value;
}