Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

❮ thuộc tính loại HTML

Thí dụ

Xác định một trường để nhập một số (bạn cũng có thể đặt các hạn chế đối với những con số được chấp nhận):

Số lượng (từ 1 đến 5):

Hãy tự mình thử »


Định nghĩa và cách sử dụng

 
5 xác định một trường để nhập một số.

Sử dụng các thuộc tính sau để chỉ định các hạn chế:

  • Tối đa - Chỉ định giá trị tối đa được phép
  • Tối thiểu - Chỉ định giá trị tối thiểu được phép
  • Bước - Chỉ định các khoảng số hợp pháp
  • Giá trị - Chỉ định giá trị mặc định

Mẹo: Luôn thêm thẻ

 
6 cho các thực tiễn tiếp cận tốt nhất! Always add the
 
6 tag for best accessibility practices!


Hỗ trợ trình duyệt

Thuộc tính
loại = "số"ĐúngĐúngĐúngĐúngĐúng

Cú pháp


❮ thuộc tính loại HTML


Tôi cần đảm bảo rằng một trường

 
7 nhất định chỉ lấy số làm giá trị. Đầu vào không phải là một phần của một hình thức. Do đó, nó không được gửi, vì vậy xác thực trong quá trình gửi không phải là một lựa chọn. Tôi muốn người dùng không thể gõ bất kỳ ký tự nào khác ngoài số.

Có một cách gọn gàng để đạt được điều này?

Hỏi ngày 19 tháng 12 năm 2012 lúc 12:40Dec 19, 2012 at 12:40

Chtenbchtenbchtenb

Phù bằng vàng 14K1373 Huy hiệu bạc114 Huy hiệu đồng13 gold badges73 silver badges114 bronze badges

3

HTML 5

Bạn có thể sử dụng số loại đầu vào HTML5 để chỉ hạn chế các mục nhập số:


Điều này sẽ chỉ hoạt động trong trình duyệt khiếu nại HTML5. Đảm bảo Doctype của tài liệu HTML của bạn là:

 
8

Xem thêm https://github.com/jonstipe/number-polyfill để được hỗ trợ trong suốt trong các trình duyệt cũ hơn.

JavaScript

Cập nhật: Có một giải pháp mới và rất đơn giản cho việc này: There is a new and very simple solution for this:

Nó cho phép bạn sử dụng bất kỳ loại bộ lọc đầu vào nào trên văn bản

 
7, bao gồm các bộ lọc số khác nhau. Điều này sẽ xử lý chính xác Copy+Paste, Drag+Drop, phím tắt, Hoạt động menu ngữ cảnh, phím không có khả năng và tất cả các bố cục bàn phím.any kind of input filter on a text
 
7, including various numeric filters. This will correctly handle Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, and all keyboard layouts.

Xem câu trả lời này hoặc tự mình thử trên jsfiddle.

Đối với mục đích chung, bạn có thể có xác thực JS như dưới đây:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


Nó sẽ hoạt động cho bàn phím số và khóa số bình thường

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Đã trả lời ngày 27 tháng 3 năm 2018 lúc 7:04

Một phương pháp khác hoạt động khá tốt.

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

Điều tuyệt vời về bản sửa lỗi này là các giá trị được sao chép cũng được bao gồm trong quy tắc.Dec 19, 2012 at 12:42

Đã trả lời ngày 19 tháng 5 năm 2021 lúc 22:43Viral Patel

Bạn có thể sử dụng nó theo một dòng3 gold badges31 silver badges29 bronze badges

15

Đã trả lời ngày 17 tháng 1 lúc 12:17

 

Tốt hơn là thêm "+" vào điều kiện regex để chấp nhận nhiều chữ số (không chỉ một chữ số):

Đã trả lời ngày 9 tháng 7 năm 2017 lúc 11:12

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

Một cách có thể là có một mảng các mã ký tự được phép và sau đó sử dụng hàm


1 để xem có được phép ký tự được nhập không.Dec 19, 2012 at 12:45

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

martincarlin87martincarlin87martincarlin87

Đã trả lời ngày 13 tháng 2 năm 2020 lúc 21:3024 gold badges97 silver badges144 bronze badges

6

Mã nhanh chóng và dễ dàng


Điều này sẽ chỉ cho phép sử dụng số và backspace.

Nếu bạn cần một phần thập phân, hãy sử dụng đoạn mã này


Đã trả lời ngày 16 tháng 12 năm 2018 lúc 14:48Dec 16, 2018 at 14:48

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

2

Vui lòng thử mã này cùng với trường đầu vào

Nó sẽ hoạt động tốt.

Đã trả lời ngày 23 tháng 8 năm 2017 lúc 11:12Aug 23, 2017 at 11:12

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

Subindas pmsubindas PMsubindas pm

2.47423 Huy hiệu bạc18 Huy hiệu đồng23 silver badges18 bronze badges

1

Bạn có thể sử dụng một mã dòng sau như:


Nó sẽ chấp nhận số ony.

Đã trả lời ngày 27 tháng 8 năm 2021 lúc 8:58Aug 27, 2021 at 8:58

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

w.Dayaw.Dayaw.Daya

3641 Huy hiệu vàng5 Huy hiệu bạc1 gold badge5 silver badges11 bronze badges

2

Bạn có thể sử dụng


1. Điều này sẽ chỉ cho phép các số được nhập vào hộp đầu vào othe.

Ví dụ: http://jsfiddle.net/spqy3/

Xin lưu ý rằng thẻ đầu vào


2 chỉ được hỗ trợ trong các trình duyệt mới hơn.

Đối với Firefox, bạn có thể xác thực đầu vào bằng cách sử dụng JavaScript:

http://jsfiddle.net/VmtF5/

CẬP NHẬT 2018-03-12: Hỗ trợ trình duyệt bây giờ tốt hơn nhiều, nó được hỗ trợ sau: Browser support is much better now it's supported by the following:

  • Chrome 6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • Bờ rìa
  • (Internet Explorer 10+)

Đã trả lời ngày 19 tháng 12 năm 2012 lúc 12:45Dec 19, 2012 at 12:45

6

Bạn có thể sử dụng thẻ

 
7 với loại thuộc tính = 'Số'.

Ví dụ: bạn có thể sử dụng


4

Trường đầu vào này chỉ cho phép các giá trị số. Bạn cũng có thể chỉ định giá trị tối thiểu và giá trị tối đa cần được chấp nhận bởi trường này.

Đã trả lời ngày 15 tháng 5 năm 2017 lúc 7:19May 15, 2017 at 7:19

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?


Và trong JS:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

Hoặc bạn có thể viết nó theo một cách hữu ích BU phức tạp:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


0

Lưu ý: Trình duyệt chéo và Regex theo nghĩa đen.:cross-browser and regex in literal.

Đã trả lời ngày 8 tháng 2 năm 2014 lúc 9:13Feb 8, 2014 at 9:13

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

Fredrick Gaussfredrick GaussFredrick Gauss

5.0971 Huy hiệu vàng26 Huy hiệu bạc43 Huy hiệu đồng1 gold badge26 silver badges43 bronze badges

3

Tôi đã sử dụng biểu thức chính quy để thay thế giá trị đầu vào bằng mẫu cần thiết.

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


1
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


2

Đã trả lời ngày 26 tháng 8 năm 2018 lúc 10:27Aug 26, 2018 at 10:27

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

1

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


3
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


4

JSfiddle: https://jsfiddle.net/ug8pvysc/

Đã trả lời ngày 19 tháng 11 năm 2015 lúc 8:04Nov 19, 2015 at 8:04

2

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


5


5 kích hoạt khi khóa được phát hành.


6 Kiểm tra xem giá trị đầu vào không phải là số.

Nếu nó không phải là số, giá trị được đặt thành 1000


7 nếu đó là số, giá trị được đặt thành giá trị.

Lưu ý: Vì một số lý do, nó chỉ hoạt động với


2 For some reason it only works with

2

Để làm cho nó thậm chí còn thoát hơn, bạn cũng có thể có một ranh giới:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


6

Enjoy!

Đã trả lời ngày 28 tháng 11 năm 2015 lúc 21:41Nov 28, 2015 at 21:41

user40521user40521user40521

1.86719 huy hiệu bạc7 Huy hiệu đồng19 silver badges7 bronze badges

Tôi đã chiến đấu với cái này một chút. Nhiều giải pháp ở đây và các nơi khác có vẻ phức tạp. Giải pháp này sử dụng JQuery/JavaScript cùng với HTML.jQuery/javascript alongside HTML.

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


7

Trong trường hợp của tôi, tôi đã theo dõi các đại lượng nhỏ với giá trị tối thiểu là 1, do đó Min = "1" trong thẻ đầu vào và ABC = 1 trong kiểm tra isnan (). Đối với các số chỉ dương, bạn có thể thay đổi các giá trị đó thành 0 và thậm chí chỉ cần xóa Min = "1" khỏi thẻ đầu vào để cho phép các số âm.

Ngoài ra, điều này hoạt động cho nhiều hộp (và có thể tiết kiệm thời gian tải cho bạn khi thực hiện chúng bằng ID), chỉ cần thêm lớp "Validatenumber" khi cần thiết.

Giải trình

ParseInt () về cơ bản làm những gì bạn cần, ngoại trừ việc nó trả về NAN chứ không phải là một số giá trị số nguyên. Với một if () đơn giản, bạn có thể đặt giá trị "dự phòng" mà bạn thích trong tất cả các trường hợp NAN được trả về :-). Ngoài ra W3 tuyên bố ở đây rằng phiên bản toàn cầu của NAN sẽ gõ cast trước khi kiểm tra để cung cấp thêm một số bằng chứng (số.isnan () không làm điều đó). Bất kỳ giá trị nào được gửi đến máy chủ/phụ trợ vẫn nên được xác thực ở đó!

Đã trả lời ngày 23 tháng 6 năm 2016 lúc 22:44Jun 23, 2016 at 22:44

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

Ê -saiIsaiah

4645 Huy hiệu bạc16 Huy hiệu Đồng5 silver badges16 bronze badges

Đủ đơn giản?

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


8
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


9

Đã trả lời ngày 8 tháng 4 năm 2020 lúc 2:47Apr 8, 2020 at 2:47

NormajeannormajeanNormajean

9773 Huy hiệu vàng10 Huy hiệu bạc21 Huy hiệu đồng3 gold badges10 silver badges21 bronze badges

1

Tôi sử dụng điều này cho mã zip, nhanh chóng và dễ dàng.

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
0

Đã trả lời ngày 14 tháng 10 năm 2013 lúc 19:56Oct 14, 2013 at 19:56

Justin Buserjustin BuserJustin Buser

2.79525 huy hiệu bạc32 huy hiệu đồng25 silver badges32 bronze badges

Nếu bạn có thể sử dụng HTML5, bạn có thể làm


1 nếu không bạn sẽ phải làm điều đó thông qua JavaScript như bạn đã nói, nó không được gửi đến để làm điều đó từ CodeBehind.

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
1

P.S đã không kiểm tra mã nhưng sẽ ít nhiều đúng hơn nếu không kiểm tra lỗi chính tả: D Bạn có thể muốn thêm một vài điều như làm gì nếu chuỗi không có hoặc trống, v.v.

Peter

27.3k8 Huy hiệu vàng63 Huy hiệu bạc83 Huy hiệu Đồng8 gold badges63 silver badges83 bronze badges

Đã trả lời ngày 19 tháng 12 năm 2012 lúc 12:53Dec 19, 2012 at 12:53

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

Czioutasczioutasczioutas

1.0322 huy hiệu vàng11 Huy hiệu bạc37 Huy hiệu đồng2 gold badges11 silver badges37 bronze badges

Câu trả lời được chấp nhận:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
2

Nó tốt nhưng không hoàn hảo. Nó hoạt động đối với tôi, nhưng tôi nhận được một cảnh báo rằng việc tuyên bố IF có thể được đơn giản hóa.

Sau đó, có vẻ như thế này, đó là cách đẹp hơn:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
3

Sẽ nhận xét bài viết gốc, nhưng danh tiếng của tôi quá thấp để làm như vậy (chỉ tạo tài khoản này).

Đã trả lời ngày 14 tháng 2 năm 2017 lúc 12:58Feb 14, 2017 at 12:58

Chris H.Chris H.Chris H.

1171 Huy hiệu bạc3 Huy hiệu đồng1 silver badge3 bronze badges

Thêm bên trong thẻ đầu vào của bạn: OnKeyUp = "value = value.replace (/[^\ d]/g, '')"

Đã trả lời ngày 5 tháng 7 năm 2018 lúc 4:25Jul 5, 2018 at 4:25

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

1

Nếu không đặt số nguyên 0

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
4

Đã trả lời ngày 12 tháng 12 năm 2014 lúc 10:50Dec 12, 2014 at 10:50

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

WebSkyWebskywebsky

2.9521 Huy hiệu vàng33 Huy hiệu bạc29 Huy hiệu đồng1 gold badge33 silver badges29 bronze badges

Vui lòng xem dự án của tôi về bộ lọc trình duyệt chéo có giá trị của phần tử đầu vào văn bản trên trang web của bạn bằng ngôn ngữ JavaScript: Bộ lọc khóa đầu vào. Bạn có thể lọc giá trị dưới dạng số nguyên, số float hoặc ghi bộ lọc tùy chỉnh, chẳng hạn như bộ lọc số điện thoại. Xem ví dụ về mã đầu vào Số nguyên:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
5

Cũng xem trang "Trường số nguyên:" của ví dụ về bộ lọc khóa đầu vào

Đã trả lời ngày 31 tháng 7 năm 2015 lúc 2:37Jul 31, 2015 at 2:37

AndrejandrejAndrej

6294 Huy hiệu bạc12 Huy hiệu Đồng4 silver badges12 bronze badges

Tôi đã cập nhật một số câu trả lời được đăng để thêm những điều sau:

  • Thêm phương thức làm phương thức mở rộng
  • Chỉ cho phép một điểm được nhập
  • Chỉ định có bao nhiêu số sau khi điểm thập phân được cho phép.

    if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
    
    6

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

Suraj Rao

29.2k11 Huy hiệu vàng95 Huy hiệu bạc102 Huy hiệu đồng11 gold badges95 silver badges102 bronze badges

Đã trả lời ngày 17 tháng 10 năm 2018 lúc 12:08Oct 17, 2018 at 12:08

Khi sử dụng mã này, bạn không thể sử dụng "Nút Backspace" trong Mozilla Firefox, bạn chỉ có thể sử dụng Backspace trong Chrome 47 && Event.Che

Đã trả lời ngày 25 tháng 5 năm 2015 lúc 3:36May 25, 2015 at 3:36

Đối với mục đích chung, bạn có thể có xác thực JS như dưới đây:

Nó sẽ hoạt động cho bàn phím số và khóa số bình thường

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
7

Đã trả lời ngày 27 tháng 3 năm 2018 lúc 7:04Mar 27, 2018 at 7:04

Một phương pháp khác hoạt động khá tốt.

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
8

Điều tuyệt vời về bản sửa lỗi này là các giá trị được sao chép cũng được bao gồm trong quy tắc.

Đã trả lời ngày 19 tháng 5 năm 2021 lúc 22:43May 19, 2021 at 22:43

Hướng dẫn how do you write numbers in html? - làm thế nào để bạn viết số trong html?

Bạn có thể sử dụng nó theo một dòng

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
9

Đã trả lời ngày 17 tháng 1 lúc 12:17Jan 17 at 12:17

Tốt hơn là thêm "+" vào điều kiện regex để chấp nhận nhiều chữ số (không chỉ một chữ số):


0

Đã trả lời ngày 9 tháng 7 năm 2017 lúc 11:12Jul 9, 2017 at 11:12

Một cách có thể là có một mảng các mã ký tự được phép và sau đó sử dụng hàm


1 để xem có được phép ký tự được nhập không.

Example:

 
0

Đã trả lời ngày 13 tháng 2 năm 2020 lúc 21:30Feb 13, 2020 at 21:30

MA1MA1MA1

2.7475 huy hiệu vàng34 Huy hiệu bạc51 Huy hiệu đồng5 gold badges34 silver badges51 bronze badges

Sử dụng

 
5, nó chỉ chấp nhận các đầu vào là số. Hãy thử gửi hai biểu mẫu dưới đây với các giá trị không số.
Try submitting the two forms below with non number values.

 
1

Các trình duyệt cũ hơn don hỗ trợ


3. Vì vậy, chúng tôi có thể xác nhận nó với JavaScript:

 
2

Đã trả lời ngày 17 tháng 6 năm 2021 lúc 14:14Jun 17, 2021 at 14:14

Câu trả lời được chấp nhận đã tốt, tuy nhiên nếu yêu cầu của bạn là bạn muốn người dùng của mình có thể điều hướng đầu vào của họ (bằng cách sử dụng các khóa con trỏ bên trái hoặc bên phải) và có thể sửa đổi đầu vào của họ (bằng cách sử dụng xóa hoặc không gian ngược Khóa trên bàn phím), bạn có thể chọn sử dụng phương pháp này.

Một lợi ích khác của phương pháp này là chấp nhận các số từ cả hàng trên cùng của bàn phím ngoài các số từ bàn phím số.

Phần tử HTML đầu vào sẽ trông giống như thế này ...

 
3

Chức năng JavaScript sẽ trông như thế này:

 
4

Đã trả lời 17 tháng 2 lúc 17:10Feb 17 at 17:10

Làm thế nào để bạn nhập số trong HTML?

Xác định một trường để nhập một số.Sử dụng các thuộc tính sau để chỉ định các hạn chế: Max - Chỉ định giá trị tối đa được phép.Min - Chỉ định giá trị tối thiểu được phép. defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed. min - specifies the minimum value allowed.

Làm thế nào để bạn chỉ viết số trong hộp văn bản trong HTML?

Bạn có thể sử dụng thẻ có loại thuộc tính = 'Số'.Trường đầu vào này chỉ cho phép các giá trị số.Bạn cũng có thể chỉ định giá trị tối thiểu và giá trị tối đa cần được chấp nhận bởi trường này.use the tag with attribute type='number'. This input field allows only numerical values. You can also specify the minimum value and maximum value that should be accepted by this field.

Làm cách nào để viết văn bản bằng HTML?

Để tạo trường đầu vào văn bản HTML, bạn sử dụng thẻ HTML.Bạn thêm type = "văn bản" để biến nó thành một trường văn bản.Điều này là do thẻ cũng có thể được sử dụng cho các loại đầu vào khác - chẳng hạn như nút gửi.use the HTML tag. You add type="text" in order to make it a text field. This is because the tag can be used for other types of input too - such as a submit button.

Loại đầu vào trong HTML là gì?

Thẻ chỉ định trường đầu vào nơi người dùng có thể nhập dữ liệu.Phần tử là yếu tố hình thức quan trọng nhất.Phần tử có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính loại.Các loại đầu vào khác nhau như sau: