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
jquery
validation
isnumeric
Wenbert
sumber
sumber
Jawaban:
Memperbarui
Ada solusi baru dan sangat sederhana untuk ini:
Lihat jawaban ini atau coba sendiri di JSFiddle .
plugin jquery.numeric
Saya telah berhasil mengimplementasikan banyak formulir dengan plugin jquery.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
pattern
atribut dannumber
ketikinput
elemen untuk membatasi input angka saja. Di beberapa browser (terutama Google Chrome), ini berfungsi untuk membatasi menempelkan konten non-numerik. Informasi lebih lanjut tentangnumber
dan tipe input baru lainnya tersedia di sini .sumber
allowDecimal
opsi untuk setiap kali saya hanya ingin mengizinkan nilai integer .. sumbernya sangat sederhana dan ditulis dengan baik.type="number"
.Jika Anda ingin membatasi input (yang bertentangan dengan validasi), Anda dapat bekerja dengan acara utama. sesuatu seperti ini:
Dan:
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.
sumber
$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
Saya berpikir bahwa jawaban terbaik adalah yang di atas untuk melakukan ini.
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
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.
sumber
keypress
dapat digunakan untuk lebih menyederhanakan ini, karena tampaknyakeyup
dankeydown
memicu pada tombol keyboard apa pun, sedangkankeypress
hanya memicu pada tombol "karakter" (sehingga tidak memicu pada panah dan menghapus tombol). Lihat jawaban ini untuk referensi: stackoverflow.com/a/1367720/1298685Plugin 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.
sumber
Tidak ada lagi plugin, jQuery telah mengimplementasikan jQuery.isNumeric () yang ditambahkan di v1.7.
Hasil sampel
Berikut adalah contoh cara mengikat isNumeric () dengan pendengar acara
sumber
var v = this.value;
mengubahnya menjadivar v = this.value.replace(/,/g,'');
. Angka seperti21,345,67.800
itu terlalu dipertimbangkan.$(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } });
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:
Javascript:
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.
sumber
Anda dapat menggunakan plugin Validasi dengan metode number () .
sumber
Pendekatan Javascript
Pendekatan jQuery
MEMPERBARUI
Jawaban di atas adalah untuk kasus penggunaan yang paling umum - memvalidasi input sebagai angka.
sumber
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:
sumber
charCode != 46
dari pernyataan if. Jawaban bagus!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:
sumber
Anda tidak melihat huruf penampilan magis dan lenyapnya tombol di bawah. Ini juga berfungsi pada tempel tetikus.
sumber
/[^0-9.]/g
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)
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:
Sumber: Baru saja menulis ini. Tampaknya bekerja. Contoh langsung: http://jsfiddle.net/tjBsF/
Kustomisasi lainnya
Beberapa hal yang dapat Anda lakukan:
Kekurangan
Saya tahu judulnya meminta solusi jQuery, tetapi mudah-mudahan seseorang akan menemukan ini berguna.
sumber
Terima kasih untuk posting Dave Aaron Smith
Saya mengedit jawaban Anda untuk menerima titik desimal dan angka dari bagian nomor. Ini cocok untuk saya.
sumber
Dan terapkan ini pada semua input yang Anda inginkan:
sumber
HTML5 mendukung nomor jenis input dengan dukungan browser global 88% + menurut CanIUse per Oktober 2015.
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/
sumber
Fungsi ini melakukan hal yang sama, menggunakan beberapa ide di atas.
sumber
/ * ini adalah versi cross browser saya tentang Bagaimana memperbolehkan hanya angka (0-9) dalam kotak input HTML menggunakan jQuery?
* /
sumber
Jalankan isinya melalui parseFloat (). Ini akan kembali
NaN
pada input yang tidak valid.sumber
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
numericInput
dapat didefinisikan, dan dapat digunakan untuk menghias bidang Anda dengan masker input numerik.diadaptasi dari situs web autoNumeric:
sumber
Saya pikir ini adalah cara yang baik untuk menyelesaikan masalah ini dan ini sangat sederhana:
Contoh: JSFiddle
Skenario tercakup
Kebanyakan rekomendasi serupa di sini gagal setidaknya salah satu dari ini atau memerlukan banyak kode untuk mencakup semua skenario ini.
home
,,end
danarrow
tombol.delete
danbackspace
digunakan pada indeks apa pun.keyup
acara tidak digunakan.Skenario gagal
0.5
dan menghapus hanya nol tidak akan berfungsi. Ini dapat diperbaiki dengan mengubah regex ke/^[0-9]*\.?[0-9]*$/
dan kemudian menambahkan acara blur untuk menambahkan awal0
ketika 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:
sumber
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.
sumber
Periksa kode pencarian ini untuk penggunaan Database:
sumber
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):
Kode ini:
Saya harap ini membantu mereka yang membutuhkan.
sumber
Menemukan solusi hebat di sini http://ajax911.com/numbers-numeric-field-jquery/
Saya baru saja mengubah "keyup" menjadi "keydown" sesuai kebutuhan saya
sumber
Jika Anda menggunakan HTML5, Anda tidak perlu bersusah payah untuk melakukan validasi. Cukup gunakan -
Atribut langkah memungkinkan titik desimal menjadi valid.
sumber
Cara lain untuk menjaga posisi tanda kuret pada input:
Keuntungan:
Plunker: Demo berfungsi
sumber
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/ .
sumber
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;)
sumber
Saya menggunakan ini, dengan hasil yang bagus ..
sumber
Ini sangat sederhana bahwa kita sudah memiliki fungsi inbuilt javascript "isNaN" ada di sana.
sumber