Saya membuat halaman web di mana saya memiliki bidang teks input di mana saya ingin hanya mengizinkan karakter numerik seperti (0,1,2,3,4,5 ... 9) 0-9.

Bagaimana saya bisa melakukan ini menggunakan jQuery?

^{Catatan: Ini adalah jawaban yang diperbarui. Komentar di bawah mengacu pada versi lama yang dipusingkan dengan kode kunci.}

jQuery

Cobalah sendiri di JSFiddle .

Tidak ada implementasi jQuery asli untuk ini, tetapi Anda dapat memfilter nilai input teks <input>dengan inputFilterplugin berikut (mendukung Salin + Tempel, Seret + Jatuhkan, pintasan keyboard, operasi menu konteks, kunci non-typeable, posisi caret, berbeda tata letak keyboard, dan semua browser sejak IE 9 ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

Anda sekarang dapat menggunakan inputFilterplugin untuk menginstal filter input:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

Lihat demo JSFiddle untuk lebih banyak contoh filter masukan. Perhatikan juga bahwa Anda masih harus melakukan validasi sisi server!

JavaScript Murni (tanpa jQuery)

jQuery sebenarnya tidak diperlukan untuk ini, Anda dapat melakukan hal yang sama dengan JavaScript murni juga. Lihat jawaban ini .

HTML 5

HTML 5 memiliki solusi asli dengan <input type="number">(lihat spesifikasi ), tetapi perhatikan bahwa dukungan browser bervariasi:

• Sebagian besar browser hanya akan memvalidasi input saat mengirimkan formulir, dan bukan saat mengetik.
• Sebagian besar peramban seluler tidak mendukung step, mindan maxatribut.
• Chrome (versi 71.0.3578.98) masih memungkinkan pengguna untuk memasukkan karakter edan Emasuk ke bidang. Lihat juga pertanyaan ini .
• Firefox (versi 64.0) dan Edge (EdgeHTML versi 17.17134) masih memungkinkan pengguna untuk memasukkan teks apa pun ke dalam bidang.

Cobalah sendiri di w3schools.com .

Berikut adalah fungsi yang saya gunakan:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

Anda kemudian dapat melampirkannya di kendali Anda dengan melakukan:

$("#yourTextBoxName").ForceNumericOnly();

Di barisan:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Gaya tidak mengganggu (dengan jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

Anda bisa menggunakan ekspresi reguler JavaScript sederhana untuk menguji karakter numerik murni:

/^[0-9]+$/.test(input);

Ini mengembalikan true jika inputnya numerik atau salah jika tidak.

atau untuk kode kunci acara, gunakan sederhana di bawah ini:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

Anda dapat menggunakan pada acara masukan seperti ini:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Tapi, apa hak istimewa kode ini?

• Ini berfungsi di browser seluler (keydown dan keyCode bermasalah).
• Ini berfungsi pada konten yang dihasilkan AJAX juga, karena Kami menggunakan "pada".
• Performa yang lebih baik daripada keydown, misalnya pada acara tempel.

Singkat dan manis - bahkan jika ini tidak akan pernah menemukan banyak perhatian setelah 30+ jawaban;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

Gunakan fungsi JavaScript isNaN ,

if (isNaN($('#inputid').val()))

if (isNaN (document.getElementById ('inputid'). val ()))

if (isNaN(document.getElementById('inputid').value))

Pembaruan: Dan di sini artikel yang bagus membicarakannya tetapi menggunakan jQuery: Membatasi Input dalam Kotak Teks HTML ke Nilai Numerik

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Sumber: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Saya menggunakan ini di file js umum internal kami. Saya hanya menambahkan kelas ke setiap input yang membutuhkan perilaku ini.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

Yang lebih sederhana bagi saya adalah

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});

Kenapa begitu rumit? Anda bahkan tidak perlu jQuery karena ada atribut pola HTML5:

<input type="text" pattern="[0-9]*">

Yang keren adalah ia menampilkan keyboard angka pada perangkat seluler, yang jauh lebih baik daripada menggunakan jQuery.

Anda dapat melakukan hal yang sama dengan menggunakan solusi yang sangat sederhana ini

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

Saya merujuk tautan ini untuk solusinya. Ini bekerja dengan sempurna !!!

Anda dapat mencoba input nomor HTML5 :

<input type="number" value="0" min="0"> 

Untuk browser yang tidak patuh ada fallback Modernizr dan Webforms2 .

Atribut pola dalam HTML5 menentukan ekspresi reguler yang nilai elemennya diperiksa.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

Catatan: Atribut pola berfungsi dengan jenis input berikut: teks, pencarian, url, tel, email, dan kata sandi.

• [0-9] dapat diganti dengan kondisi ekspresi reguler apa pun.

• {1,3} itu mewakili minimal 1 dan maksimum 3 digit dapat dimasukkan.

Sesuatu yang cukup sederhana menggunakan jQuery.validate

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');

function suppressNonNumericInput (event) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}

Saya sampai pada solusi yang sangat bagus dan sederhana yang tidak mencegah pengguna memilih teks atau menyalin paste seperti solusi lainnya. gaya jQuery :)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server

Anda dapat menggunakan fungsi JavaScript ini:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

Dan Anda dapat mengikatnya ke kotak teks Anda seperti ini:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

Saya menggunakan di atas dalam produksi, dan berfungsi dengan baik, dan itu adalah lintas-browser. Selain itu, tidak tergantung pada jQuery, jadi Anda dapat mengikatnya ke kotak teks Anda dengan JavaScript sebaris:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>

Saya pikir itu akan membantu semua orang

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })

Saya menulis milik saya berdasarkan postingan @ user261922 di atas, sedikit dimodifikasi sehingga Anda dapat memilih semua, tab dan dapat menangani beberapa bidang "angka saja" pada halaman yang sama.

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});

Ini adalah solusi cepat yang saya buat beberapa waktu lalu. Anda dapat membaca lebih lanjut tentang itu di artikel saya:

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});

Anda ingin mengizinkan tab:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

Berikut adalah jawaban yang menggunakan pabrik Widget jQuery UI. Anda dapat menyesuaikan karakter apa yang diizinkan dengan mudah.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

Itu akan memungkinkan angka, tanda angka dan jumlah dolar.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});

Ini sepertinya tidak bisa dipecahkan.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

Perlu memastikan Anda memiliki tombol angka dan tombol tab yang berfungsi juga

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

Saya ingin membantu sedikit, dan saya membuat versi saya, onlyNumbersfungsinya ...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

Cukup tambahkan tag input "... input ... id =" price "onkeydown =" return onlyNumber (event) "..." dan Anda selesai;)

Saya juga ingin menjawab :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

Itu saja ... hanya angka. :) Hampir bisa bekerja hanya dengan 'blur', tapi ...

Cara sederhana untuk memeriksa bahwa nilai yang dimasukkan adalah angka:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }

Hanya perlu menerapkan metode ini di Jquery dan Anda dapat memvalidasi kotak teks Anda untuk hanya menerima nomor saja.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

Coba solusi ini di sini

Anda dapat mencoba input nomor HTML5:

<input type="number" placeholder="enter the number" min="0" max="9">

Elemen tag input ini sekarang hanya akan mengambil nilai antara 0 hingga 9 karena atribut min diatur ke 0 dan atribut maks diatur ke 9.

untuk informasi lebih lanjut tentang kunjungi http://www.w3schools.com/html/html_form_input_types.asp