Berdasarkan jQuery, kotak teks hanya boleh memasukkan nombor (perpuluhan, integer)

Berdasarkan jQuery, kotak teks hanya boleh memasukkan nombor (perpuluhan, integer)_jquery

WBOY

Lepaskan： 2016-05-16 15:20:04

asal

1217 orang telah melayarinya

Dalam aplikasi sebenar, kotak teks kadangkala hanya membenarkan input integer, tetapi kadangkala ia mungkin lebih "persaudaraan" dan membenarkan input nombor titik terapung Mari kita perkenalkan melalui contoh kod cara melaksanakan menggunakan jquery. Kotak teks hanya boleh memasukkan perpuluhan , kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
}).bind("paste",function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

Salin selepas log masuk

Kod di atas memenuhi keperluan kami Hanya integer atau nombor titik terapung boleh dimasukkan dalam kotak teks Kod ini agak mudah dan saya tidak akan memperkenalkannya di sini.

Berikut akan memperkenalkan cara menggunakan jquery untuk menyedari bahawa kotak teks hanya boleh memasukkan integer:

Kadang-kadang mungkin perlu untuk menetapkan bahawa hanya integer boleh dimasukkan ke dalam kandungan kotak teks Berikut adalah contoh kod yang boleh merealisasikan fungsi ini untuk rujukan rakan-rakan yang memerlukan.

Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/\D|^0/g,'')); 
}).bind("paste",function(){
$(this).val($(this).val().replace(/\D|^0/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

Salin selepas log masuk

Kod di atas mencapai keperluan yang dijangkakan Hanya integer boleh dimasukkan ke dalam kotak teks Berikut adalah pengenalan kepada proses pelaksanaannya.

Ulasan kod:

1.$(function(){}), apabila struktur dokumen dimuatkan sepenuhnya, laksanakan kod dalam fungsi.
2.$(".NumText").keyup(function(){}), daftarkan fungsi pemprosesan acara keyup untuk kotak teks.
3.$(this).val($(this).val().replace(/D|^0/g,'')), gunakan ungkapan biasa melalui fungsi replace() untuk menggantikan kandungan bukan angka dengan kosong .
4.bind("paste",function(){$(this).val($(this).val().replace(/D|^0/g,''));}), daftar tampal pemprosesan acara Samar-samar, sudah tentu, panggilan berantai digunakan di sini, yang menghalang pengguna daripada menyalin dan menampal menggunakan ctrl v.

Kod di atas agak mudah untuk ditulis, dan beberapa perkara yang sukar dilampirkan dengan ulasan saya percaya ia akan membantu semua orang.