jQuery Chỉ cho phép Số và Số thập phân trong Hộp văn bản [số] – jquery thêm dấu thập phân vào số

jQuery chỉ cho phép các số và giá trị thập phân trong hộp văn bản, jquery xác thực số, Hạn chế người dùng chỉ nhập số 0 – 9 trong hộp văn bản [XEM DEMO]

< strong> Bạn đang xem: jquery thêm dấu thập phân vào số

jQuery cho phép các giá trị số: Bài viết này giải thích cách sử dụng jQuery ở phía máy khách để 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) trong 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 rất đơn giản để bất kỳ ai cũng có thể thực hiện xác thực cơ bản để 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.

Phương pháp hay nhất là thực hiện xác thực ở cả phía .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 vấn đề. Nếu người dùng không nhấn bất kỳ phím nào và kéo thả trực tiếp các giá trị bằng chuột (tham khảo hình ảnh bên dưới), thì nó sẽ không xác thực.

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

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

Đầ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ẻ head của trang web của chúng tôi trông giống như được viết bên dưới.

  // *
& lt; đầu & gt;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" & gt;
& lt; / script & gt;
& lt; / head & gt;
// *  

Đá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 chúng tôi để 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 tôi trông giống như hình dưới đây

Xem Thêm  Giá trị trả về trong Python - giá trị trả về hàm python

  // *
& lt; bảng & gt;
  & lt; tr & gt;
& lt; td & gt; & lt; strong & gt; Giá trị int: & lt; / strong & gt; & lt; / td & gt;
& lt; td & gt;
& lt; input type = "text" name = "numeric" class = 'allow_numeric' & gt;
& lt; div & gt; Chỉ cho phép các giá trị số (không có số thập phân) & lt; / div & gt;
& lt; / td & gt;
  & lt; / tr & gt;
  & lt; tr & gt;
& lt; td & gt; & lt; strong & gt; Thập phân: & lt; / strong & gt; & lt; / td & gt;
& lt; td & gt;
& lt; input type = "text" name = "numeric" class = 'allow_decimal' & gt;
& lt; div & gt; Cho phép các giá trị số với số thập phân & lt; / div & gt;
& lt; / td & gt;
  & lt; / tr & gt;
& lt; / table & gt;
// *  

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 allow_numeric . Trên sự kiện đầu vào của nó sẽ chỉ giới hạn các ký tự số.

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ẻ head của trang web của chúng tôi trông giống như được viết bên dưới, ở đây chúng tôi đang thêm hai hộp văn bản vào trang web của chúng tôi để 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ư hình bên dưới Ở đây trong hộp văn bản đầu tiên của chúng ta, chúng ta đã thêm một lớp có tên. Trên sự kiện đầu vào của nó sẽ chỉ giới hạn các ký tự số.

Để nhận giá trị hộp văn bản, chúng tôi sử dụng phương thức jQuery Val () . Và chúng tôi đã sử dụng regex tức là / \ 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 & lt; 48 || evt.which & gt; 57))
     {
evt.preventDefault ();
     }
 });
// *  

Lưu ý: Sự kiện đầu vào jquery không được hỗ trợ trong phiên bản IE & lt; 9. Nhưng các phiên bản IE cũ hơn có sự kiện riêng của nó, tức là onpropertychange hoạt động 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

Xem Thêm  Nút HTML bị vô hiệu hóa - nút bị vô hiệu hóa trong html

Đọc thêm: jQuery cách xác thực hộp kiểm

jQuery: Mã cho phép các 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à trên sự kiện của 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 các 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) & amp; & amp; (evt.which & lt; 48 || evt.which & gt; 57))
   {
     evt.preventDefault ();
   }
 });
// *  

Kết luận: Ở đây chúng tôi đã giải thích cách sử dụng jQuery ở phía máy khách, chúng tôi hạn chế người dùng chỉ nhập số hoặc thập phân giá trị trong 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, xin hãy tiếp tục ghé thăm blog này và chia sẻ điều này trong mạng của bạn. Ngoài ra, tôi rất muốn lắng nghe ý kiến ​​của bạn trong phần bình luận.

Tái bút: Nếu bạn thấy nội dung này có giá trị và muốn cảm ơn tôi? 👳 Mua cà phê cho tôi


Xem thêm những thông tin liên quan đến chủ đề jquery thêm dấu thập phân vào số

Lập trình web chuyên sâu – 12 – Laravel – jQuery & REST API & Datatable

  • Tác giả: J2TeamNNL Blog
  • Ngày đăng: 2022-04-05
  • Đánh giá: 4 ⭐ ( 9533 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link Server Discord:
    https://discord.gg/8G39DeVhDX
    Link khoá học miễn phí
    https://j2teamnnl.teachable.com/courses
    Link tổng hợp câu hỏi từ livestream
    https://j2c.cc/j2school-qa

    00:00 Bắt đầu
    1:20 Hover Zoom
    3:20 Giỏi giang muộn
    8:00 Bài tương tác cao của thầy Long trên linkedin
    13:00 Thứ 7 tuần này hướng dẫn lên khung trang web
    16:23 Bắt đầu học
    25:00 Cách chèn jquery, cái hay và bất tiện khi sử dụng cdn
    29:50 Datatable
    36:55 Stack – push
    39:20 Laravel datatable
    1:14:05 dom datatable
    1:42:00 Postman

    họclậptrình php mysql laravel jquery api datatable

Mách bạn cách tự động thêm dấu chấm vào dãy số trong Excel

  • Tác giả: www.ketoan.vn
  • Đánh giá: 3 ⭐ ( 2296 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để dễ nhìn và dễ theo dõi, với những dãy số dài đến hàng nghìn bạn nên cài đặt để Excel tự động thêm dấu chấm vào dãy số.

jQuery – Làm tròn đến 2 chữ số thập phân và tính toán với số đó

  • Tác giả: vi.pinlivingcolor.com
  • Đánh giá: 5 ⭐ ( 4137 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm thế nào để làm tròn các giá trị tax và crazyto thành 2 chữ số thập phân … Tôi đã thử sử dụng .toFixed (2) nhưng nó trả về một chuỗi và sau đó tôi không thể tính toán với nó nữa. Nếu ai đó có thể cập nhật fid …

Cách Tạo Dấu Phẩy Trong Mail Merge, Cách Sửa Lỗi Định Dạng Số Khi Dùng Mail Merge

  • Tác giả: thosanlinhhon.vn
  • Đánh giá: 5 ⭐ ( 3296 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tin tức Tư vấn Tri thức Tin VP Bảo mật Mạng Máy bộ Phần mềm Khi trộn văn bản kết hợp giữa Word với Excel nhiều khi dữ liệu hiển thị trong file Word không giữ nguyên được định dạng số trong Excel , Ví dụ có bản dữ liệu trong Excel như sau :Trong file gốc dữ liệu của Excel , cột Lương ta thấy cứ 3 số lại phân cách nhau bằng dấu phảy , hoặc 2 người dưới cùng không phân tách nhau mà lại có thêm phần thập phân

Các cách thêm dấu thập phân để tách phần nghìn sử dụng C#

  • Tác giả: dotnet.edu.vn
  • Đánh giá: 3 ⭐ ( 8788 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những điều quan trọng nhất trong project phần mềm thương mại là định dạng giá cả để yêu cầu người dùng nhập vào. Vì việc đọc các số lớn hơn 1000, không có dấu phân cách hàng nghìn là khó, nên chúng ta cần có một tính năng có thể thêm dấu phân cách phần nghìn vào. Trong bài viết sau, bạn sẽ hiểu cách thêm hàng nghìn vào một số trong TextBox hoặc các bộ điều khiển khác, chẳng hạn như nhãn.

Sử dụng dấu phân cách hàng ngàn trong Mail Merge

  • Tác giả: xehanoi.info
  • Đánh giá: 5 ⭐ ( 2878 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn chi tiết phân tách hàng ngàn trong tính năng Mail Merge của phần mềm soạn thảo văn bản Microsoft Word

Cách thêm số thập phân và bước nhảy cho price filter woocommerce

  • Tác giả: levantoan.com
  • Đánh giá: 4 ⭐ ( 6588 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Khóa chính trong SQL Server - ví dụ về khóa chính trong sql