Membuat TextBox Only Numbers di Html Menggunakan JQuery


TextBox only number ini digunakan untuk text box yang memang hanya boleh diisikan dengan angka atau karakter koma(,) dan titik(.). Dalam bebearpa aplikasi kita memerlukan pembatasan dimana user tidak boleh mengisikan karakter huruf. Dengan menggunakan JQuery kita hanya melakukan validasi di client dan memangkas kemungkinan error mulai dari sumbernya. Dalam contoh kali ini, ketika user mengetikkan karakter selain angka, koma dan titik maka karakter itu tidak akan dimunculkan. Berikut ini source codenya:

<html>
 <head>
	<script type="text/javascript" src="jquery-1.6.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		$('.numbersOnly').keypress(function(event) {
			var charCode = (event.which) ? event.which : event.keyCode
			if ((charCode >= 48 && charCode <= 57)
				|| charCode == 46
				|| charCode == 44)
				return true;
			return false;
		});
	});
	</script>

	<title>Test</title>
 </head>

 <body>
	<input type='text' class='numbersOnly' />
	<input type='text' class='allCharacter' />
 </body>
</html>

Untuk melihat demonya, anda dapat buka link ini: JsFiddle

Result: ::::::::::

 

About windupurnomo

I'm interested in programming. I am active with several programming such as Java, C #, C, JavaScript, HTML. I'm also develop desktop application (Java Swing), Mobile Application (Android), and Web programming (ASP MVC).
This entry was posted in Java, Web Application and tagged , , , , . Bookmark the permalink.

4 Responses to Membuat TextBox Only Numbers di Html Menggunakan JQuery

  1. Du, kalau validasi lo bakalan macet kalau inputannya gak diketikin (copy paste misal)

  2. aplysit says:

    Ngapain pakai jquery? Jgn tergantung framework, gak baik

  3. aical says:

    bagaimana bila menggunakan listview only numbers?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s