Chỉ cho phép số và số thập phân trong javascript hộp văn bản

Hôm nay mình sẽ hướng dẫn các bạn cách chỉ cho phép nhập số và 2 số thập phân trong textbox trong jquery. Chúng tôi sẽ hiển thị ví dụ về jquery chỉ cho phép số và 2 số thập phân trong hộp văn bản. chúng tôi sẽ triển khai cách chỉ cho phép 2 chữ số sau số thập phân trong jquery. chúng tôi sẽ từng bước giải thích jquery chỉ cho phép các số có 2 chữ số thập phân. bạn có thể hiểu khái niệm jquery chỉ cho phép 2 giá trị thập phân trong hộp văn bản

Tôi sẽ lấy hộp văn bản đơn giản và chỉ cho phép nhập số float với 2 giá trị thập phân. ở đây tôi cũng đã thêm một ví dụ khác chỉ cho phép số và số thập phân trong hộp văn bản jquery

Bây giờ, hãy xem ví dụ về chỉ cho phép số và 2 số thập phân trong jquery hộp văn bản. Trong bài viết này, chúng tôi sẽ thực hiện cách chỉ cho phép 2 chữ số sau số thập phân trong jquery. từng bước giải thích jquery chỉ cho phép các số có 2 chữ số thập phân. bạn có thể hiểu khái niệm jquery chỉ cho phép 2 giá trị thập phân trong hộp văn bản. Hãy bắt đầu với việc chỉ cho phép 2 giá trị thập phân trong jquery hộp văn bản

Trong ví dụ này, tôi sẽ lấy textbox đơn giản và chỉ cho phép nhập số float với 2 giá trị thập phân. ở đây tôi cũng đã thêm một ví dụ khác chỉ cho phép số và số thập phân trong hộp văn bản jquery. Vì vậy, hãy xem cả hai ví dụ và tôi hy vọng nó có thể giúp bạn

jQuery cho phép các giá trị số. Bài viết này giải thích cách phía máy khách sử dụng jQuery chỉ cho phép các số và giá trị thập phân trong hộp văn bản. Nói cách khác, hạn chế người dùng chỉ nhập các giá trị số (0 đến 9) vào hộp văn bản hoặc điều khiển đầu vào

Tôi đã giữ cho bài viết này thật đơn giản để bất kỳ ai cũng có thể thực hiện xác thực cơ bản việc nhập các giá trị số vào hộp văn bản trên trang web của họ. Sau này nếu bạn muốn tổng của tất cả các hộp văn bản, bạn có thể dễ dàng tính toán nó trong jQuery

Thực tiễn tốt nhất là thực hiện xác thực ở cả hai bên. i. e ở phía máy chủ (Php, Asp. net C#, v.v.) và phía máy khách (JavaScript/Jquery)

Hầu hết trên internet, tôi đã tìm thấy các ví dụ như sử dụng các sự kiện Keypress, Keyup và Keydown và nó hoạt động, nhưng có một nhược điểm. Nếu người dùng không nhấn bất kỳ phím nào và kéo thả các giá trị trực tiếp bằng chuột (tham khảo hình ảnh bên dưới), thì nó sẽ không hợp lệ

Ngoài ra, sự kiện Keypress không hoạt động trên trình duyệt di động Android, do đó, để xác thực bằng chứng đầy đủ, không bao giờ sử dụng sự kiện nhấn phím

Vì vậy, hôm nay chúng ta tìm hiểu cách hạn chế người dùng chỉ nhập các giá trị số trong trường hộp văn bản đầu vào cũng như cho phép các giá trị thập phân. i. e (chỉ cho phép một dấu chấm khi sử dụng jquery) cho dù người dùng kéo, thả, sao chép, dán hay nhập thủ công. Hãy đi đến phần mã hóa

---

Đầu ra.

Các bước để chỉ cho phép số và dấu chấm (thập phân/ float)

1. Tải xuống bao gồm thư viện jquery
2. đánh dấu HTML. Thêm hộp văn bản
3. jQuery. mã để cho phép các giá trị số và thập phân

# Tải xuống và nhập thư viện jQuery

Trước khi viết bất kỳ mã nào, trước tiên, chúng tôi sẽ tải xuống và thêm tệp jQuery mới nhất vào trang Web của chúng tôi. Bạn có thể lưu trữ tệp jQuery trên máy chủ hoặc sử dụng trực tiếp thư viện jQuery do Google lưu trữ. Vì vậy, sau đó, thẻ đầu Trang web của chúng tôi trông giống như được viết bên dưới.

//*



//*

Đánh dấu HTML. Thêm hai hộp văn bản để xác thực

Ở đây chúng tôi đang thêm hai hộp văn bản vào trang web của mình để xác thực. Hộp văn bản đầu tiên sẽ chỉ cho phép các giá trị số (không có dấu chấm hoặc số thập phân). Hộp văn bản thứ hai sẽ cho phép nhập số cũng như giá trị thập phân. Đây là cách HTML của chúng ta trông giống như được hiển thị bên dưới

//*

  
	Int value:
	
	
	
Allow only numeric values (without decimal) 
	
  
  
	 Decimal :
	
	
	
Allow numeric values with decimal
	
  

//*

jQuery. Mã chỉ cho phép các giá trị số

Ở đây trong hộp văn bản đầu tiên của chúng tôi, chúng tôi đã thêm một lớp có tên là allow_numeric. Trên sự kiện đầu vào của nó sẽ chỉ giới hạn số ký tự

Để lấy giá trị của textbox chúng ta sử dụng phương thức jQuery Val(). Và chúng tôi đã sử dụng regex i. e /\D/g hạn chế người dùng chỉ cho phép các giá trị số.  

//*
$(".allow_numeric").on("input", function(evt) {
    var self = $(this);
    self.val(self.val().replace(/\D/g, ""));
    if ((evt.which < 48 || evt.which > 57)) 
     {
	   evt.preventDefault();
     }
 });
//*

Ghi chú. Sự kiện đầu vào jquery không được hỗ trợ trong phiên bản IE <9. Nhưng các phiên bản IE cũ hơn có sự kiện riêng i. e. , onpropertychange thực hiện tương tự như oninput. Sự kiện đầu vào kích hoạt bất cứ khi nào đầu vào thay đổi

Xem bản trình diễn

cũng đọc. jQuery cách xác thực hộp kiểm

jQuery. Mã cho phép số và giá trị thập phân trong hộp văn bản

Ở đây, trong hộp văn bản thứ 2 của chúng tôi, chúng tôi đã thêm lớp allow_decimal và trong trường hợp này, nó sẽ cho phép người dùng nhập các giá trị thập phân. Đoạn mã jquery sau đây sẽ cho phép người dùng nhập một ký tự dấu chấm vào hộp văn bản

Để người dùng có thể nhập giá trị thập phân vào hộp văn bản

//*
$(".allow_decimal").on("input", function(evt) {
   var self = $(this);
   self.val(self.val().replace(/[^0-9\.]/g, ''));
   if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57)) 
   {
     evt.preventDefault();
   }
 });
//*

Phần kết luận. Ở đây, chúng tôi đã giải thích cách phía máy khách sử dụng jQuery, chúng tôi hạn chế người dùng chỉ nhập số hoặc giá trị thập phân vào hộp văn bản. Chúng tôi đã sử dụng JavaScript regex để xác thực các hộp văn bản

Bạn cũng có thể kiểm tra các bài viết này

Cảm ơn bạn đã đọc, vui lòng tiếp tục truy cập blog này và chia sẻ điều này trong mạng của bạn. Ngoài ra, tôi rất thích nghe ý kiến ​​​​của bạn trong phần bình luận

Làm cách nào để chỉ cho phép các giá trị số trong hộp văn bản bằng JavaScript?

Làm cách nào để chỉ cho phép số và số thập phân trong hộp văn bản bằng jQuery?

Làm cách nào để chỉ cho phép hai chữ số sau số thập phân trong JavaScript?

Làm cách nào để chỉ cho phép một dấu thập phân trong hộp văn bản ở góc?