Jquery Only Allow Input Float Number Example

By Hardik Savani | November 13, 2020 | Category : jQuery


This article will provide some of the most important example jquery only allow input float number. In this article, we will implement a jquery input allow only numbers and decimal. we will help you to give example of allow only numbers and decimal in textbox jquery. Here you will learn allow only float numbers in textbox jquery.

In this example, i will take simple textbox and allow only enter float number. here i also added another example with allow only numbers and 2 decimal in textbox jquery. so let's see both example and i hope it can help you.

Preview:

Example 1: Jquery Only Allow Input Float Number

<!DOCTYPE html>

<html>

<head>

<title>Jquery Only Allow Input Float Number - ItSolutionStuff.com</title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>

<body>

<div class="container">

<h1>Jquery Only Allow Input Float Number - ItSolutionStuff.com</h1>

<input type="text" name="number" class="number" autocomplete="off">

</div>

</body>

<script type="text/javascript">

$('.number').keypress(function(event) {

if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {

event.preventDefault();

}

});

</script>

</html>

Example 2: Allow only numbers and 2 decimal in textbox jquery

<!DOCTYPE html>

<html>

<head>

<title>Jquery Only Allow Input Float Number - ItSolutionStuff.com</title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>

<body>

<div class="container">

<h1>Jquery Only Allow Input Float Number - ItSolutionStuff.com</h1>

<input type="text" name="number" class="number" autocomplete="off">

</div>

</body>

<script type="text/javascript">

$('.number').keypress(function(event) {

if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&

((event.which < 48 || event.which > 57) &&

(event.which != 0 && event.which != 8))) {

event.preventDefault();

}

var text = $(this).val();

if ((text.indexOf('.') != -1) &&

(text.substring(text.indexOf('.')).length > 2) &&

(event.which != 0 && event.which != 8) &&

($(this)[0].selectionStart >= text.length - 2)) {

event.preventDefault();

}

});

</script>

</html>

I hope it can help you...



Tags : jQuery


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: