ItSolutionStuff.com

Jquery - Allow Only Numbers and 2 Decimal in Textbox Example

By Hardik Savani • November 21, 2020
jQuery

Hi All,

Now, let's see example of allow only numbers and 2 decimal in textbox jquery. In this article, we will implement a how to allow only 2 digits after decimal in jquery. step by step explain jquery allow only numbers with 2 decimal places. you can understand a concept of jquery allow only 2 decimal values in textbox. Let's get started with allow only 2 decimal values in textbox jquery.

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

Preview:

Example 1: 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>

Example 2: 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>

I hope it can help you...

Tags: jQuery
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Textarea Auto Height Based on Content Jquery Example

Read Now →

How to Print Iframe Content using Jquery?

Read Now →

Jquery Convert Array into Object Example

Read Now →

How to Allow Only 4 Digits Numbers in Textbox using JQuery?

Read Now →

JQuery Redirect to Another Page After 5 Seconds Example

Read Now →

Add Edit Delete Table Row Example using JQuery

Read Now →

How to Remove Query String from URL using JQuery?

Read Now →

Check and Uncheck All Checkbox using JQuery Example

Read Now →

How to Allow Only One Checkbox Checked at a Time in JQuery?

Read Now →

How to Convert Line Breaks to br in jQuery ?

Read Now →

Autocomplete with Images and Custom HTML Code in Jquery UI?

Read Now →