jQuery: apa cara terbaik untuk membatasi "angka" -hanya input untuk kotak teks? (izinkan titik desimal)

228

Apa cara terbaik untuk membatasi "angka" - hanya input untuk kotak teks?

Saya mencari sesuatu yang memungkinkan titik desimal.

Saya melihat banyak contoh. Namun belum memutuskan mana yang akan digunakan.

Pembaruan dari Praveen Jeganathan

Tidak ada lagi plugin, jQuery telah mengimplementasikan jQuery.isNumeric()tambahannya sendiri di v1.7. Lihat: https://stackoverflow.com/a/20186188/66767

Wenbert
sumber
3
Ini pertanyaan berbasis opini, tetapi sangat bermanfaat. Pertanyaan berbasis opini harus diizinkan. Orang yang mencari informasi ini hanya perlu menyadari bahwa ini hanya jawaban berdasarkan pendapat. TAG sudah cukup.
Thiago C. S Ventura
inilah artikel yang bagus dengan demo langsung codepedia.info/…
Satinder singh

Jawaban:

198

Memperbarui

Ada solusi baru dan sangat sederhana untuk ini:

Ini memungkinkan Anda untuk menggunakan segala jenis filter input pada teks <input>, termasuk berbagai filter numerik. Ini akan menangani Salin + Tempel, Seret + Jatuhkan, pintasan keyboard, operasi menu konteks, tombol yang tidak dapat diketik dengan benar, dan semua tata letak keyboard.

Lihat jawaban ini atau coba sendiri di JSFiddle .

plugin jquery.numeric

Saya telah berhasil mengimplementasikan banyak formulir dengan plugin jquery.numeric .

$(document).ready(function(){
    $(".numeric").numeric();
});

Selain itu ini berfungsi dengan textareas juga!

Namun, perhatikan bahwa Ctrl + A, Salin + Tempel (melalui menu konteks) dan Seret + Drop tidak akan berfungsi seperti yang diharapkan.

HTML 5

Dengan dukungan yang lebih luas untuk standar HTML 5, kita dapat menggunakan patternatribut dan numberketik inputelemen untuk membatasi input angka saja. Di beberapa browser (terutama Google Chrome), ini berfungsi untuk membatasi menempelkan konten non-numerik. Informasi lebih lanjut tentang numberdan tipe input baru lainnya tersedia di sini .

TheVillageIdiot
sumber
5
Plugin ini tidak memungkinkan Anda untuk menggunakan backspace di Opera.
Darryl Hein
6
@ Darryl sumbernya hanya beberapa lusin baris, jadi saya yakin memodifikasinya agar sepele. Saya baru saja menemukan plugin ini dan memodifikasinya sehingga sekarang ada allowDecimalopsi untuk setiap kali saya hanya ingin mengizinkan nilai integer .. sumbernya sangat sederhana dan ditulis dengan baik.
Earlz
1
Ini tidak berfungsi saat menyalin-menempel ke bidang input yang dari type="number".
Tallmaris
@Tallmaris ini memang pertanyaan dan jawaban yang sangat lama. Telah ada banyak perubahan pada HTML dan harus dipertimbangkan.
TheVillageIdiot
Hai @TheVillageIdiot, Anda benar. Saya tidak ingin terdengar kasar di komentar (yang mungkin agak kering) :) Faktanya adalah saya melihat beberapa komentar baru-baru ini, jadi saya hanya ingin menjelaskan bahwa ini mungkin, pada saat ini, bukan solusi terbaik untuk masalah.
Tallmaris
288

Jika Anda ingin membatasi input (yang bertentangan dengan validasi), Anda dapat bekerja dengan acara utama. sesuatu seperti ini:

<input type="text" class="numbersOnly" value="" />

Dan:

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

Ini segera membuat pengguna tahu bahwa mereka tidak dapat memasukkan karakter alfa, dll. Daripada nanti selama fase validasi.

Anda masih ingin memvalidasi karena input mungkin diisi dengan memotong dan menempelkan dengan mouse atau mungkin dengan autocompleter formulir yang mungkin tidak memicu peristiwa utama.

Keith Bentrup
sumber
4
+1 - Saya akan menyarankan hal yang sama ini. Ini adalah poin yang sangat baik untuk dicatat bahwa bentuk validasi ini dapat terjadi per penekanan tombol, daripada sekali di akhir. Satu-satunya hal yang saya tambahkan adalah beberapa bentuk peringatan bahwa apa yang diketik pengguna ditolak. Hanya dengan tidak menunjukkan huruf-hurufnya akan membuat semua orang berpikir keyboard mereka rusak. mungkin secara halus mengubah latar belakang atau warna perbatasan .. selama pengguna tahu bahwa aplikasi Anda benar-benar melakukan sesuatu.
nickf
sepakat. Saya punya contoh di tarbuilders.com . jika Anda mengklik "kontak", formulir memeriksa input pengguna dengan cepat dan jika itu valid, ada batas hijau dan tanda centang. tidak valid -> merah dan "x"
Keith Bentrup
5
Lihat jawaban ini untuk memperbaiki masalah tombol panah.
Hanna
Harap dicatat bahwa Anda masih dapat menempelkan karakter dan huruf dengan klik kanan tombol mouse> rekat Cara mudah untuk memperbaikinya adalah:$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
Rens Tillmann
1
CRAP, jika saya menulis angka yaitu "123", dan kemudian tekan tombol huruf, yaitu "a" itu mengosongkan input ...
candjack
102

Saya berpikir bahwa jawaban terbaik adalah yang di atas untuk melakukan ini.

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

tapi saya setuju bahwa itu agak menyakitkan bahwa tombol panah dan menghapus tombol snap cursor ke ujung string (dan karena itu ditendang kembali kepada saya dalam pengujian)

Saya menambahkan perubahan sederhana

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

dengan cara ini jika ada tombol apa saja yang tidak akan menyebabkan teks diubah, abaikan saja. Dengan ini, Anda dapat menekan panah dan menghapus tanpa melompat ke ujung tetapi menghapus semua teks non numerik.

James Nelli
sumber
27
Untuk kinerja yang lebih baik, buat var dengan ganti hasil alih-alih menjalankannya dua kali.
DriverDan
4
keypressdapat digunakan untuk lebih menyederhanakan ini, karena tampaknya keyupdan keydownmemicu pada tombol keyboard apa pun, sedangkan keypress hanya memicu pada tombol "karakter" (sehingga tidak memicu pada panah dan menghapus tombol). Lihat jawaban ini untuk referensi: stackoverflow.com/a/1367720/1298685
Ian Campbell
Ia menerima lebih dari satu desimal. Cara menerima hanya satu desimal. Saya telah menerapkan bidang teks jumlah. Itu mengambil 12.5.6 juga. Cara membatasi untuk satu titik.
niru dyogi
@IanCampbell keypress berarti Anda dapat memasukkan karakter untuk memulai dengan yang tidak dihapus. Tidak akan bekerja Keydown melakukan hal yang sama. Saya hanya bisa membuatnya bekerja dengan keyup.
nickdnk
54

Plugin jquery.numeric memiliki beberapa bug yang saya beri tahu penulis. Ini memungkinkan beberapa titik desimal di Safari dan Opera, dan Anda tidak bisa mengetikkan backspace, tombol panah, atau beberapa karakter kontrol lainnya di Opera. Saya membutuhkan input bilangan bulat positif sehingga akhirnya saya hanya menulis sendiri.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});
Dave Aaron Smith
sumber
Tidak mungkin memasukkan 0 sama sekali dengan menggunakan kode ini. Diuji dengan Chrome dan FF di Mac.
jaredstenquist
1
Saya memperbarui ini untuk menerima 0 digit (48 == event.which && ($ (ini) .val ()> 0)) || // Tidak 0 digit pertama
aljordan82
Ini adalah solusi hebat tetapi desimal hilang, cukup tambahkan (46 == event.which &&! ($ (Ini) .val (). Include ("."))) ||
DiamondDrake
Tidak dapat mengetik 0 sama sekali.
PJ7
47

Tidak ada lagi plugin, jQuery telah mengimplementasikan jQuery.isNumeric () yang ditambahkan di v1.7.

jQuery.isNumeric( value )

Menentukan apakah argumennya adalah angka.

Hasil sampel

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

Berikut adalah contoh cara mengikat isNumeric () dengan pendengar acara

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});
Praveen
sumber
+1 tanpa plugin. Saya ingin menambahkan sedikit perubahan untuk memungkinkan ribuan pemisah. Di tempat var v = this.value;mengubahnya menjadi var v = this.value.replace(/,/g,'');. Angka seperti 21,345,67.800itu terlalu dipertimbangkan.
maan81
Apakah ada yang tahu bagaimana ini memeriksa angka? Apakah ini menggunakan kode kunci atau ekspresi reguler? Penting jika Anda mempertimbangkan tata letak keyboard yang berbeda.
Christopher Grigg
2
Ini sangat dekat. Namun, jika Anda menahan tombol karakter, itu tidak menjalankan pemeriksaan dengan benar. Karakter akan "berjalan." Alih-alih coba ini: $(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } });
Gwi7d31
34

Plugin numerik () yang disebutkan di atas, tidak berfungsi di Opera (Anda tidak dapat mundur, menghapus atau bahkan menggunakan tombol kembali atau maju).

Kode di bawah ini dalam JQuery atau Javascript akan bekerja dengan sempurna (dan hanya dua baris).

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

Tentu saja ini hanya untuk input numerik murni (plus backspace, delete, forward / back keys) saja tetapi dapat dengan mudah diubah untuk memasukkan poin dan karakter minus.

Mike Gibbs
sumber
numpad juga tidak diizinkan
Graham
25

Anda dapat menggunakan plugin Validasi dengan metode number () .

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});
Dror
sumber
FYI - number () tidak berfungsi dengan angka eksponensial.
ScottLenart
18

Tidak perlu kode panjang untuk batasan input angka coba saja kode ini.

Ini juga menerima valid int & float kedua nilai.

Pendekatan Javascript

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Pendekatan jQuery

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

MEMPERBARUI

Jawaban di atas adalah untuk kasus penggunaan yang paling umum - memvalidasi input sebagai angka.

Tetapi di bawah ini adalah potongan kode untuk kasus penggunaan khusus

  • Mengizinkan angka negatif
  • Menampilkan keystroke yang tidak valid sebelum menghapusnya.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

vinayakj
sumber
14

Di bawah ini adalah apa yang saya gunakan untuk benar-benar memblokir penekanan tombol. Ini hanya memungkinkan angka 0-9 dan titik desimal. Mudah diimplementasikan, tidak banyak kode, dan berfungsi seperti pesona:

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">
kaleazy
sumber
Jika ada yang bertanya-Anda dapat membatasi desimal dengan menghapus charCode != 46dari pernyataan if. Jawaban bagus!
Gaʀʀʏ
Tepat, saya menghapus charCode! = 46 untuk melewati desimal. Terima kasih kaleazy, jawaban ini sangat membantu saya.
msqar
3
Ini adalah solusi yang buruk karena tidak memperhitungkan backspace, panah, kunci kontrol, dan penekanan tombol lainnya yang diperlukan.
DriverDan
Saya baru saja memposting solusi yang mirip dengan ini, tetapi juga menangani backspace, panah dan tidak menggunakan kode kunci hard-coded. Lihat di sini: stackoverflow.com/a/23468513/838608
Håvard Geithus
11

Sebagai sedikit perbaikan pada saran ini , Anda dapat menggunakan plugin Validasi dengan angka () , digit , dan metode jangkauan . Misalnya, berikut ini memastikan Anda mendapatkan bilangan bulat positif antara 0 dan 50:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});
Taman Brad
sumber
9

Anda tidak melihat huruf penampilan magis dan lenyapnya tombol di bawah. Ini juga berfungsi pada tempel tetikus.

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});
Null Head
sumber
Meskipun tidak memungkinkan desimal, saya menemukan ini menjadi metode paling sederhana untuk bilangan bulat.
nickdnk
Untuk desimal, Anda mungkin dapat memperbarui regex ke sesuatu seperti/[^0-9.]/g
Null Head
Saya tidak butuh desimal. Itu hanya karena OP lakukan, tapi ya :)
nickdnk
8

Saya pertama kali mencoba menyelesaikan ini menggunakan jQuery, tapi saya tidak senang dengan karakter yang tidak diinginkan (non-digit) benar-benar muncul di bidang input sesaat sebelum dihapus pada keyup.

Mencari solusi lain yang saya temukan ini:

Integer (non-negatif)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

Sumber: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Contoh contoh langsung: http://jsfiddle.net/u8sZq/

Poin desimal (non-negatif)

Untuk memungkinkan satu titik desimal Anda dapat melakukan sesuatu seperti ini:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

Sumber: Baru saja menulis ini. Tampaknya bekerja. Contoh langsung: http://jsfiddle.net/tjBsF/

Kustomisasi lainnya

  • Untuk memungkinkan lebih banyak simbol diketik, tambahkan saja ke ekspresi reguler yang bertindak sebagai filter kode char dasar.
  • Untuk menerapkan pembatasan kontekstual sederhana, lihat konten saat ini (keadaan) dari bidang input (oToCheckField.value)

Beberapa hal yang dapat Anda lakukan:

  • Hanya satu angka desimal yang diizinkan
  • Izinkan tanda minus hanya jika diposisikan di awal string. Ini akan memungkinkan angka negatif.

Kekurangan

  • Posisi caret tidak tersedia di dalam fungsi. Ini sangat mengurangi batasan kontekstual yang dapat Anda terapkan (mis. Tidak ada dua simbol berurutan yang sama). Tidak yakin apa cara terbaik untuk mengaksesnya.

Saya tahu judulnya meminta solusi jQuery, tetapi mudah-mudahan seseorang akan menemukan ini berguna.

Håvard Geithus
sumber
6

Terima kasih untuk posting Dave Aaron Smith

Saya mengedit jawaban Anda untuk menerima titik desimal dan angka dari bagian nomor. Ini cocok untuk saya.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});
lekshmi
sumber
6
   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // 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();
                       }
                   }
               });
           });
       };

Dan terapkan ini pada semua input yang Anda inginkan:

$('selector').ForceNumericOnly();
David Freire
sumber
5

HTML5 mendukung nomor jenis input dengan dukungan browser global 88% + menurut CanIUse per Oktober 2015.

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

Ini bukan solusi terkait JQuery, tetapi keuntungannya adalah pada ponsel, keyboard Android akan dioptimalkan untuk memasukkan angka.

Atau, dimungkinkan untuk menggunakan teks tipe input dengan "pola" parameter baru. Lebih detail dalam spesifikasi HTML5.

Saya pikir ini lebih baik daripada solusi jquery, karena dalam pertanyaan ini disediakan solusi jquery tidak mendukung ribuan pemisah. Jika Anda dapat menggunakan HTML5.

JSFiddle: https://jsfiddle.net/p1ue8qxj/

Mladen Adamovic
sumber
4

Fungsi ini melakukan hal yang sama, menggunakan beberapa ide di atas.

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});
  • tampilkan umpan balik visual (huruf yang salah muncul sebelum menghilang)
  • memungkinkan desimal
  • menangkap banyak "."
  • tidak memiliki masalah dengan kiri / kanan del dll.
mordy
sumber
4

/ * ini adalah versi cross browser saya tentang Bagaimana memperbolehkan hanya angka (0-9) dalam kotak input HTML menggunakan jQuery?
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });
roger
sumber
3

Jalankan isinya melalui parseFloat (). Ini akan kembali NaNpada input yang tidak valid.

Maciej Łebkowski
sumber
3

Anda dapat menggunakan autoNumeric dari decorplanit.com . Mereka memiliki dukungan yang bagus untuk numerik, serta mata uang, pembulatan, dll.

Saya telah menggunakan di lingkungan IE6, dengan beberapa css tweak, dan itu adalah keberhasilan yang masuk akal.

Misalnya, kelas css numericInputdapat didefinisikan, dan dapat digunakan untuk menghias bidang Anda dengan masker input numerik.

diadaptasi dari situs web autoNumeric:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
Tidak ada Gangguan
sumber
autoNumeric jelas merupakan jalan yang harus ditempuh
Prethen
3

Saya pikir ini adalah cara yang baik untuk menyelesaikan masalah ini dan ini sangat sederhana:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

Contoh: JSFiddle

Skenario tercakup

Kebanyakan rekomendasi serupa di sini gagal setidaknya salah satu dari ini atau memerlukan banyak kode untuk mencakup semua skenario ini.

  1. Hanya memungkinkan 1 titik desimal.
  2. Mengizinkan home,, enddan arrowtombol.
  3. Mengizinkan deletedan backspacedigunakan pada indeks apa pun.
  4. Mengizinkan pengeditan pada indeks apa pun (selama input cocok dengan regex).
  5. Mengizinkan ctrl + v dan shift + masukkan untuk input yang valid (sama dengan klik kanan + tempel).
  6. Tidak berkedip nilai teks karena keyupacara tidak digunakan.
  7. Kembalikan pilihan setelah input yang tidak valid.

Skenario gagal

  • Dimulai dengan 0.5dan menghapus hanya nol tidak akan berfungsi. Ini dapat diperbaiki dengan mengubah regex ke /^[0-9]*\.?[0-9]*$/dan kemudian menambahkan acara blur untuk menambahkan awal 0ketika kotak teks dimulai dengan titik desimal (jika diinginkan). Lihat skenario lanjutan ini untuk ide yang lebih baik tentang cara memperbaikinya.

Plugin

Saya membuat plugin jquery sederhana ini untuk mempermudah ini:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);
David Sherret
sumber
2

Cara terbaik adalah memeriksa contek kotak teks setiap kali kehilangan fokus.

Anda dapat memeriksa apakah konten adalah "angka" menggunakan ekspresi reguler.

Atau Anda dapat menggunakan plugin Validasi, yang pada dasarnya melakukan ini secara otomatis.

jrharshath
sumber
Ekspresi reguler adalah /^\d*\.{0,1}#d+$/
Chetan S
2

Periksa kode pencarian ini untuk penggunaan Database:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'
Alex Homm
sumber
2

Ini adalah cuplikan yang baru saja saya lakukan (menggunakan bagian kode oleh Peter Mortensen / Keith Bentrup) untuk validasi integer persen pada bidang teks (diperlukan jQuery):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

Kode ini:

  • Memungkinkan menggunakan tombol angka utama dan keypad angka.
  • Validasi untuk mengecualikan karakter Shift-numeric (mis. #, $,%, Dll)
  • Mengganti nilai NaN dengan 0
  • Menggantikan 100 nilai lebih tinggi dari 100

Saya harap ini membantu mereka yang membutuhkan.

Francisco Alvarado
sumber
2

Jika Anda menggunakan HTML5, Anda tidak perlu bersusah payah untuk melakukan validasi. Cukup gunakan -

<input type="number" step="any" />

Atribut langkah memungkinkan titik desimal menjadi valid.

Jay Blanchard
sumber
2
Tidak demikian, Firefox & Opera memungkinkan input teks non-numerik
Michael Fever
@MichaelDeMutis Anda benar, ini memungkinkan input teks non-numerik tetapi gagal validasi dalam FF (Saya belum punya kesempatan untuk menguji di Opera).
Jay Blanchard
2

Cara lain untuk menjaga posisi tanda kuret pada input:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

Keuntungan:

  1. Pengguna dapat menggunakan tombol panah, Backspace, Hapus, ...
  2. Bekerja ketika Anda ingin menempelkan angka

Plunker: Demo berfungsi

Carlos Toledo
sumber
1

Saya baru saja menemukan plug-in yang lebih baik. Memberi Anda lebih banyak kendali. Katakanlah Anda memiliki bidang DOB di mana Anda memerlukannya numerik tetapi juga menerima karakter "/" atau "-".

Ini sangat bagus!

Lihat di http://itgroup.com.ph/alphanumeric/ .

Bachir El Khoury
sumber
1
    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Kode ini bekerja sangat baik pada saya, saya hanya perlu menambahkan 46 di array controlKeys untuk menggunakan periode, meskipun saya tidak berpikir adalah cara terbaik untuk melakukannya;)

Reedyseth
sumber
1

Saya menggunakan ini, dengan hasil yang bagus ..

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Kaustubh
sumber
1

Ini sangat sederhana bahwa kita sudah memiliki fungsi inbuilt javascript "isNaN" ada di sana.

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});
Jyothu
sumber