JQuery Numeric

Home / Tricks / JQuery Numeric

shutterstock74137594Czasami zdarza się tak, że potrzebujemy odfiltrować dane z pola input i przetworzyć je w odpowiedni sposób. Jeżeli potrzebujesz matematycznego filtra, który zabroni wpisywania liter do pola to dobrze trafiłeś. Jquery Numeric pozwala nałożyć blokadę do pola input, które z kolei przepuszcza jedynie liczby rzeczywiste, całkowite czy całkowite dodatnie. Instalacja dodatku jest banalnie prosta pobieramy całość z linku tego: https://github.com/SamWM/jQuery-Plugins/blob/master/numeric/ do nagłówku strony doczepiamy plik js jquery.numeric.js. Cały mechanizm mamy już podłączony, wystarczy przejść do praktyki.

Jquery numeric uruchamia się dla danego input poprzez dodanie klasy do pola. Przykład:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.numeric.js"></script> //dodajemy jquery.numeric.js
</head>
<body>
	<form>
		Numbers only:
		<input class="numeric" type="text" /> // dodajemy klasę do pola input
		Integers only:
		<input class="integer" type="text" />
		No negative values:
		<input class="positive" type="text" />
		No negative values (integer only):
		<input class="positive-integer" type="text" />
		<a href="#" id="remove">Remove numeric</a>
	</form>
	<script type="text/javascript">
	$(".numeric").numeric(); //inicjujemy skrypt
	$(".integer").numeric(false, function() { alert("Integers only"); this.value = ""; this.focus(); });
	$(".positive").numeric({ negative: false }, function() { alert("No negative values"); this.value = ""; this.focus(); });
	$(".positive-integer").numeric({ decimal: false, negative: false }, function() { alert("Positive integers only"); this.value = ""; this.focus(); });
	$("#remove").click(
		function(e)
		{
			e.preventDefault();
			$(".numeric,.integer,.positive").removeNumeric();
		}
	);
	</script>
</body>
</html>
Recent Posts
Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.