Pertanyaan Bagaimana cara mengizinkan hanya numerik (0-9) di kotak masukan HTML menggunakan jQuery?


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

Bagaimana saya bisa melakukan ini menggunakan jQuery?


807


asal


Jawaban:


Lihatlah ini plug-in (Fork dari plugin jquery numerik texotela). Ini (jstepper) adalah satu lagi.

Ini adalah tautan jika Anda ingin membuatnya sendiri.

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A, Command+A
            (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
             // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

CATATAN: Jika halaman web Anda menggunakan HTML5, Anda dapat menggunakan built in <input type="number"> dan gunakan min dan max properti untuk mengontrol nilai minimum dan maksimum.


Berikut ini diminimalkan dan juga memungkinkan untuk digunakan CTRL+X, CTRL+C, dan CTRL+V

$(function() {
  $('#staticParent').on('keydown', '#child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110])||(/65|67|86|88/.test(e.keyCode)&&(e.ctrlKey===true||e.metaKey===true))&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="staticParent">
	<input id="child" type="textarea" />
</div>


1124



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 memasangnya ke kontrol Anda dengan melakukan:

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

159



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">


126



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

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

Ini mengembalikan nilai true jika inputnya numerik atau salah jika tidak.

atau untuk keycode 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();
    }

99



Anda dapat menggunakan pada acara input seperti ini:

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

Tapi, apa hak istimewa kode ini?

  • Ia bekerja pada browser mobile (keydown dan keyCode memiliki masalah).
  • Ini berfungsi pada konten yang dihasilkan AJAX juga, karena kami menggunakan "aktif".
  • Performa lebih baik dari keydown, misalnya pada event paste.

64



Gunakan fungsi JavaScript tidak ada,

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

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

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

Memperbarui: Dan di sini artikel yang bagus membicarakannya tetapi menggunakan jQuery: Membatasi Masukan di Kotak Teks HTML ke Nilai Numerik


43



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

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

40