{{ message }}

Cara Membuat Input Textbox yg Hanya Menerima Numeric dengan JQuery

16/07/2017 | Javascript
Cara Membuat Input Textbox yg Hanya Menerima Numeric dengan JQuery

Untuk membuat aplikasi yg terproteksi dan terhindar dari kesalahan penginputan salah satu-nya adalah dengan menyediakan komponen UI yg terproteksi, friendly dan sesuai dengan kebutuhan. Misalnya dalam penginputan nilai numerik seharusnya kita memproteksi textbox penginputan tersebut dari karakter lain selain numerik. Hal ini ditujukan untuk menghindari kesalahan dari pengguna dan lebih bersahabat secara User Experience sebelum pengguna tersebut melakukan kesalahan yg akan divalidasi, sistem kita sudah memproteksinya terlebih dahulu.

Kali ini saya akan membagikan script JQuery untuk memproteksi textbox dari karakter selain numerik. Mungkin ini akan berguna bagi Anda dalam hal penginputan suatu nilai seperti quantity, nilai mata pelajaran dan lain-lain. Yg perlu Anda lakukan adalah mengcopy script dan mengganti selector dan id #only-numeric saja sesuai kebutuhan Anda;

Source Code Lengkap

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Only Numeric Textbox</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    
</head>
 
<body>
    
    <input id="only-numeric" type="text">
 
    <script>
        
    $("#only-numeric").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) ||
             // Allow: Ctrl+C
            (event.keyCode == 67 && event.ctrlKey === true) ||
             // Allow: Ctrl+X
            (event.keyCode == 88 && event.ctrlKey === true) ||
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((event.shiftKey || (event.keyCode < 48 || event.keyCode > 57)) && (event.keyCode < 96 || event.keyCode > 105)) {
            event.preventDefault();
        }
    });
    </script>
 
</body>
 
</html>