cari

Rumah >hujung hadapan web >tutorial js >Berdasarkan jQuery, kotak teks hanya boleh memasukkan nombor (perpuluhan, integer)_jquery

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

WBOY
WBOYasal
2016-05-16 15:20:041217semak imbas

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>

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang template statik permulaan AngularJS_AngularJSArtikel seterusnya：Penjelasan terperinci tentang template statik permulaan AngularJS_AngularJS

Artikel berkaitan

Lihat lagi