Javascript Input Allow Only Float Tutorial


Share:
Published By: Admin, Published On: Jun 22, 2021, Category: Javascript

Hello Friends,

Now let's see example of how to input allow only float example. We will use how to input allow only float in javascript. Here you will learn how to use input allow only float. This is a short guide on input allow only float. Let's get started with how to input allow only float in javascript.

Here i will give you many example how you can input allow only float javascript.

Example : 1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript Input Allow Only Float</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h3>Javascript Input Allow Only Float</h3>
						</div>
						<div class="card-body">
							<p>Input Float Number :</p>
							<input type="text" class="float form-control" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$('input.float').on('input', function() {
		  		this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
			});
		</script>
	</body>
</html>
Output :
Input Float Number :
22.545323
Example : 2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript Input Allow Only Float</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h3>Javascript Input Allow Only Float</h3>
						</div>
						<div class="card-body">
							<p>Input Float Number :</p>
							<input type="text" class="filterme form-control">
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$('.filterme').keypress(function(eve) {
		  		if ((eve.which != 46 || $(this).val().indexOf('.') != -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) {
					eve.preventDefault();
				}
				$('.filterme').keyup(function(eve) {
					if ($(this).val().indexOf('.') == 0) {
		  				$(this).val($(this).val().substring(1));
					}
				});
			});
		</script>
	</body>
</html>
Output :
Input Float Number :
999.999999

It will help you...

Share: