Input[type="text"] only Accept Number(Numeric Value), codes in JavaScript

on

 Input[type="text"] only Accept Number(Numeric Value), codes in JavaScript


<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <style>
        div {
            width: 400px;
            height: 130px;
            border: 2px solid black;
            padding: 15px;
            position: absolute;
            left: 27%;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;padding:13px;">springBoot & JS
       SSSs
        </h1>
        <h3>
          Force input field to take only numbers as an input
        </h3>
    </center>
  
    <div class="container">
        <form name="inputnumber" 
              autocomplete="off">
            <b>Register No:</b>
            <input type="text" 
                   onkeypress="return onlyNumberKey(event)" 
                   maxlength="11" 
                   size="50%" />
  
            <br>
            <br>
            <b>Ph. Number:</b>
            <input type="tel" 
                   size="50%" 
                   onkeypress="return onlyNumberKey(event)" />
  
            <br>
            <br>
            <center>
                <b>Age:</b>
                <input type="number" 
                       placeholder=" Only 12+ allowed" 
                       min="12" />
                <input type="submit"
                       value="Submit" 
                       onclick="return detailssubmit()">
            </center>
        </form>
    </div>
    <script>
        function onlyNumberKey(evt) {
              
            // Only ASCII character in that range allowed
            var ASCIICode = (evt.which) ? evt.which : evt.keyCode
            if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
                return false;
            return true;
        }
    </script>
    <script>
        function detailssubmit() {
            alert("Your details were Submitted");
        }
    </script>
</body>
  
  
</html>

Output: 

Comments

Post a Comment