Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Allow Only Numeric Input in HTML Text Input Field</title> <style> .success { outline: 2px solid green; } .error { outline: 2px solid red; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ // Define regular expression var regex = /^\d*[.]?\d*$/; $("#myInput").on("input", function(){ // Get input value var inputVal = $(this).val(); // Test input value against regular expression if(regex.test(inputVal)) { $(this).removeClass("error").addClass("success"); } else{ $(this).removeClass("success").addClass("error"); } }); }); </script> </head> <body> <input type="text" id="myInput"> <p><strong>Note:</strong> This HTML text input only allow numeric keystrokes and decimal ('.')</p> </body> </html>
