HTML5: loại đầu vào số chỉ mất số nguyên?

249

Tôi đang sử dụng Trình xác thực công cụ jQuery để thực hiện xác thực HTML5 thông qua jQuery. Nó đã hoạt động rất tốt cho đến nay ngoại trừ một điều. Trong đặc tả HTML5, loại "số" đầu vào có thể có cả số nguyên và số dấu phẩy động. Điều này có vẻ rất thiển cận vì nó sẽ chỉ là một trình xác nhận hữu ích khi các trường cơ sở dữ liệu của bạn được ký số dấu phẩy động (đối với các số nguyên không dấu, bạn sẽ phải quay lại xác thực "mẫu" và do đó mất các tính năng bổ sung như lên xuống mũi tên cho các trình duyệt hỗ trợ nó). Có một loại đầu vào khác hoặc có lẽ là một thuộc tính sẽ giới hạn đầu vào chỉ là số nguyên không dấu? Tôi không thể tìm thấy bất kỳ, cảm ơn.

BIÊN TẬP

Ok, các bạn, tôi đánh giá cao thời gian và sự giúp đỡ của bạn, nhưng tôi thấy nhiều cuộc bỏ phiếu không đáng có đang diễn ra: D. Đặt bước thành 1 không phải là câu trả lời vì nó không hạn chế đầu vào. Bạn vẫn có thể nhập số dấu phẩy động âm vào hộp văn bản. Ngoài ra, tôi biết về xác nhận mẫu (tôi đã đề cập đến nó trong bài viết gốc của mình), nhưng đó không phải là một phần của câu hỏi. Tôi muốn biết nếu HTML5 cho phép hạn chế đầu vào loại "số" thành các giá trị nguyên dương. Đối với câu hỏi này, dường như, sẽ là "không, không". Tôi không muốn sử dụng xác thực mẫu bởi vì điều này gây ra một số hạn chế khi sử dụng xác thực jQuery Tools, nhưng dường như đặc tả này không cho phép cách thức sạch hơn để làm điều này.

jquery  html  validation  jquery-tools 
— JayPea
nguồn
3
Kể từ năm 2019, tôi không biết từ khi nào, numberđầu vào (ít nhất là trong FF / Chrome / Safari) chỉ chấp nhận số nguyên theo mặc định, trừ khi bạn đặt giá trị rõ ràng cho stepattr cho phép giá trị thập phân; ví dụ : step="0.01". Tài liệu MDN ở đây . Trong hai suy nghĩ về điều này bởi vì tôi nghĩ đó là một mặc định hợp lý, nhưng cũng là một thay đổi đột phá (vâng, nó đã ảnh hưởng đến một số mã tôi đã viết).
— Darragh Enright

Câu trả lời:

326

https://www.w3.org/wiki/HTML/Elements/input/number

Điều tốt nhất bạn có thể đạt được chỉ với HTML

<input type="number" min="0" step="1"/>
Mở rộng đoạn trích

— Ô mai Aurélien
nguồn
6
Có lẽ bạn nên thiết lập minđể 1như ông muốn số dương (và số điện thoại không không âm).
— Martin Thoma
1
@pwdst Tôi sẽ thứ hai. <input type="number" min="0" step="1"/>là câu trả lời đúng nhất cho câu hỏi Dù sao, điểm quan trọng của việc có cả hai step="1"và là pattern="\d+"gì? Tôi không thể gõ số dấu phẩy động trong cả hai trường hợp.
— Ashfaq của Đan Mạch
27
Điều này đã không làm việc cho tôi trên phiên bản mới nhất của chrome. Nó không cho phép các chữ cái được gõ, nhưng nó cho phép các ký tự đặc biệt được chèn vào.
— Malavos
2
Tại sao tôi có thể nhập e vào
— cấp mặt trời
4
@grantun cho các số mũ, ví dụ 10e20.
— sn3ll
180

Đặt stepthuộc tính thành 1:

<input type="number" step="1" />

Điều này có vẻ hơi lỗi trong Chrome ngay bây giờ vì vậy nó có thể không phải là giải pháp tốt nhất vào lúc này.

Một giải pháp tốt hơn là sử dụng patternthuộc tính, sử dụng biểu thức chính quy để khớp với đầu vào:

<input type="text" pattern="\d*" />

\dlà biểu thức chính quy cho một số, *có nghĩa là nó chấp nhận nhiều hơn một trong số chúng. Đây là bản demo: http://jsfiddle.net/b8NrE/1/

— lập trình viên
nguồn
2
Như JayPea đã học, không phải tất cả các trình duyệt đều hỗ trợ tất cả các yếu tố HTML5, vì vậy tốt nhất là cung cấp sự xuống cấp duyên dáng, như bạn đã đề xuất.
— DOK
6
@Zut Xác thực HTML5 không ngăn bạn nhập các khóa đó. Nó chỉ ngăn chặn hình thức được gửi với những nhân vật đó. Nếu bạn gửi biểu mẫu có đầu vào thuộc loại numbercó chứa các ký tự khác, thì Chrome sẽ hiển thị cho bạn thông báo lỗi.
— js-coder
2
@dotweb - Tôi thấy quan điểm của bạn. Sự khác biệt giữa hai là với thuộc tính số, tất cả các ký tự chữ cái sẽ tự động bị xóa khi tôi bỏ chọn (kích hoạt làm mờ) cho đầu vào. Điều này không xảy ra khi sử dụng thuộc tính mẫu. Tôi đoán sự khác biệt này chỉ quan trọng nếu bạn đang sử dụng AJAX để đăng dữ liệu của mình và bạn đang sử dụng một số sự kiện khác ngoài submitviệc kích hoạt bài đăng.
— Zut
6
Điều này không làm những gì OP yêu cầu. Chỉ các số nguyên /\d*/.test(1.1) // true
— vsync
2
@vsync pattern="\d*"không giống như /\d*/, pattern="\d*"bằng /^(?:\d*)$/, vui lòng tham khảo tài liệu thuộc tính mẫu HTML5 .
— Wiktor Stribiżew
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Sử dụng mã này, đầu vào trường văn bản giới hạn để chỉ nhập các chữ số. Mẫu là thuộc tính mới có sẵn trong HTML 5.

Mẫu thuộc tính doc

— sự bất công
nguồn
9
Theo đặc tả , thuộc tính mẫu chỉ có thể được sử dụng trong đó loại đầu vào là Văn bản, Tìm kiếm, URL, Điện thoại, E-mail, Mật khẩu (như được hiển thị ở đây với loại "Văn bản"). Điều này có nghĩa là ngữ nghĩa của loại đầu vào số và do đó (quan trọng) bàn phím số trên màn hình của một số máy tính bảng và điện thoại bị mất khi sử dụng phương pháp này.
— pwdst
3
Điều này trên firefox 36.0 cho phép bạn nhập các chữ cái và ký tự đặc biệt.
— Malavos
1
Nó không giới hạn chỉ nhập vào số, bạn vẫn có thể nhập chữ cái!
— HadidAli
35

Cách dễ dàng sử dụng JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
— Tarek Kalaji
nguồn
Tôi không hiểureplace(/(\..*)\./g, '$1')
— codyc4321
3
Điều này rất quan trọng để chấp nhận số float và .chỉ lặp lại một lần, ví dụ 123.556có thể được viết.
— Tarek Kalaji
8
@TarekKalaji - câu hỏi nêu số nguyên và không nổi số
— vsync
Làm thế nào về thiết bị di động? bởi vì văn bản loại hiển thị tất cả các bàn phím (cũng có ký tự alfanumeric)
— Nuri YILMAZ
27

Mẫu rất đẹp nhưng nếu bạn muốn hạn chế nhập vào các số chỉ với type = "text", bạn có thể sử dụng oninput và regex như dưới đây:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Tôi lo lắng cho tôi :)

— Viktor Karpyuk
nguồn
Coi chừng cách tiếp cận này có thể phủ nhận phương thức (thay đổi) của bạn (xử lý sự kiện) và cũng xóa giá trị mặc định của bạn trong hộp nhập.
— HadidAli
14

Điều này không chỉ dành cho html5 mà tất cả các trình duyệt đều hoạt động tốt. thử cái này 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
— Leopard
nguồn
12
Điều này tệ đây. Trên đầu vào thử: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. Sử dụng oninputthay thế
— zanderwar
1
Khi câu trả lời này được viết, HTML5 không được công bố. @zanderwar
— Muhammet có thể TONBUL
11

Mẫu luôn được ưu tiên để hạn chế, thử oninputvà minxảy ra 1 để chỉ nhập các số từ 1 trở đi

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
— Noothan yv
nguồn
Đó là giải pháp rất hay. Cái gì cho `value = $ {var}` là gì?
— Nhà phát triển
@AcademyofProgrammer giá trị mặc định cho đầu vào đó
— Shinigamae
câu trả lời tốt nhất! hoạt động để dán, hoạt động ngay cả trong IE (10+), cho phép bạn tự do hiển thị bất kỳ bàn phím nào thông qua loại đầu vào và không làm cho chrome hiển thị các mũi tên lên / xuống phiền phức bên trong trường.
— Janosch
5

bạn đã thử đặt stepthuộc tính thành 1 như thế này chưa

<input type="number" step="1" />
— DevTeamExpress
nguồn
4

Có thể nó không phù hợp với mọi trường hợp sử dụng, nhưng

<input type="range" min="0" max="10" />

có thể làm một công việc tốt: fiddle .

Kiểm tra tài liệu .

— Luca Fagioli
nguồn
3

Có, HTML5 không. Hãy thử mã này ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

Xem các paremeter tối thiểu và tối đa? Tôi đã thử nó bằng Chrome 19 (đã hoạt động) và Firefox 12 (không hoạt động).

— wilsonfoz
nguồn
Điều này giả định rằng bạn muốn một phạm vi được biết đến. Nhưng nếu bạn muốn bất kỳ giá trị số nguyên, điều này vẫn hoạt động?
— RandomHandle
3

Chỉ cần đặt nó trong trường đầu vào của bạn: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

— bệnh tật
nguồn
3

Tôi đã làm việc oh Chrome và có một số vấn đề, mặc dù tôi sử dụng các thuộc tính html. Tôi đã kết thúc với mã js này

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
— a.valchev
nguồn
Tôi đã kết thúc việc sử dụng này cũng với 1 điều chỉnh nhỏ; Tôi đã thay đổi parseInt (value) thành parseInt (value.replace ('.', ''). Điều này cho phép tôi dán 1,56 và giữ giá trị được hiển thị ở mức 156 thay vì 1.
— Codecripblr
2

Từ thông số kỹ thuật

step="any"hoặc số dấu phẩy động dương
Chỉ định mức độ chi tiết của giá trị của phần tử.

Vì vậy, bạn có thể chỉ cần đặt nó thành 1:

— David Hedlund
nguồn
8
Tôi đã thử điều này nhưng vấn đề là bạn vẫn có thể nhập số dấu phẩy động trong hộp văn bản.
— JayPea
Vì vậy, bạn cần mã ngăn người dùng gõ một dấu thập phân?
— Blazemonger
2

Đặt stepthuộc tính cho bất kỳ số float nào, ví dụ 0,01 và bạn tốt để đi.

— Thần chú
nguồn
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
— Sarthak
nguồn
0

Hiện tại, không thể ngăn người dùng viết các giá trị thập phân trong đầu vào của bạn chỉ bằng HTML. Bạn phải sử dụng javascript.

— Michal
nguồn
-2

Trong Tương lai ™ (xem Tôi có thể sử dụng ), trên các tác nhân người dùng trình bày bàn phím cho bạn, bạn có thể giới hạn kiểu nhập văn bản chỉ ở dạng số input[inputmode].

— tây tây
nguồn
inputmodechủ yếu dành cho các thiết bị cầm tay và sẽ kích hoạt bố cục bàn phím chính xác, nhưng đối với các máy tính "bình thường" có bàn phím, nó sẽ không ngăn được việc nhập bất cứ thứ gì bạn muốn.
— vsync
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.