Hướng dẫn how do i restrict a textbox to accept only numbers in javascript? - làm cách nào để hạn chế hộp văn bản chỉ chấp nhận các số trong javascript?

180

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

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

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

Badges vàng 14K12 MADGES73 Huy hiệu bạc114 Huy hiệu đồng12 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ố:

<input type="number" name="someid" />

Đ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à:

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

5, 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

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

5, 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;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Nếu bạn muốn cho phép số thập phân thay thế "điều kiện nếu" với điều này:

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

Nguồn: Đầu vào văn bản HTML chỉ cho phép đầu vào số

JSfiddle Demo: http://jsfiddle.net/viralpatel/nsjy7/

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

Viral patelvirus patelViral Patel

8.3163 Huy hiệu vàng31 Huy hiệu bạc29 Huy hiệu đồng3 gold badges31 silver badges29 bronze badges

15

Bạn cũng có thể sử dụng thuộc tính mẫu trong HTML5:

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

Hướng dẫn xác thực đầu vào

Mặc dù, nếu doctype của bạn không phải là

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

martincarlin87martincarlin87martincarlin87

10,5K24 Huy hiệu vàng97 Huy hiệu bạc144 Huy hiệu đồng24 gold badges97 silver badges144 bronze badges

6

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

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Đ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

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />

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

2

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

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

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

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ư:

<input type="text" onkeypress="return /[0-9]/i.test(event.key)" >

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

w.Dayaw.Dayaw.Daya

3541 Huy hiệu vàng5 Huy hiệu bạc11 Huy hiệu đồng1 gold badge5 silver badges11 bronze badges

2

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

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

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

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Đố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

<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

10,5K24 Huy hiệu vàng97 Huy hiệu bạc144 Huy hiệu đồng

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

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

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

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Điều này sẽ chỉ cho phép sử dụng số và backspace.:cross-browser and regex in literal.

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

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

Vui lòng thử mã này cùng với trường đầu vào1 gold badge26 silver badges43 bronze badges

3

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

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

Subindas pmsubindas PM

2.47423 Huy hiệu bạc18 Huy hiệu đồngMay 15, 2017 at 7:19

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

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

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

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

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Nó sẽ chấp nhận số ony.Aug 26, 2018 at 10:27

1

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

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

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

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

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

3541 Huy hiệu vàng5 Huy hiệu bạc11 Huy hiệu đồngNov 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;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

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

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

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

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

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

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

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:

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

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Enjoy!

Chrome 6+Nov 28, 2015 at 21:41

user40521user40521user40521

Firefox 29+19 silver badges7 bronze badges

Opera 10.1+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;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Safari 5+

Bờ rìa

(Internet Explorer 10+)

Và trong JS:

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

Ê -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;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

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

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

Đã 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)))

Đã 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.79524 huy hiệu bạc32 huy hiệu đồng24 silver badges32 bronze badges

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

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

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

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)))

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)))

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

1

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

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

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

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)))

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

Suraj Rao

29.1k11 Huy hiệu vàng95 Huy hiệu bạc101 Huy hiệu đồng11 gold badges95 silver badges101 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)))

Đã 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)))

Đ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

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

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

Đã 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ố):

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Đã 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

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

Example:

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

MA1MA1MA1

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

Sử dụng

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

Đã 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 ...

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

<input type="text" name="name" pattern="[0-9]" title="Title" /> 

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

Làm cách nào để hạn chế một hộp văn bản chỉ có số?

Làm thế nào tôi có thể sử dụng JavaScript để chỉ cho phép các số được nhập vào hộp văn bản?

Làm thế nào để bạn hạn chế đầu vào trong JavaScript?

Làm thế nào để bạn hạn chế số đầu vào trong HTML?