2012-03-04 32 views
19
<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius"> 

Đây là HTML của tôi, được chụp bằng firebug (trên chrome).Thuộc tính độ dài HTML không hoạt động trên chrome và safari?

Tôi được phép viết bao nhiêu ký tự tùy thích trong trường biểu mẫu - trong Chrome và Safari.

Khi trên Firefox hoặc IE10, giới hạn là tốt.

Tôi chưa tìm thấy sự cố này trên mạng.

Lưu ý: type = "number" - không phải văn bản.

Bất kỳ ai đã gặp sự cố này trước đây?

+0

http://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome –

Trả lời

24

Sử dụng thuộc tính tối đa cho các đầu vào của type="number". Nó sẽ xác định số lượng cao nhất có thể mà bạn có thể chèn

<input type="number" max="999" /> 

nếu bạn thêm cả max và một giá trị tối thiểu bạn có thể xác định phạm vi của giá trị được phép:

<input type="number" min="1" max="999" /> 

Xem này example

EDIT

Nếu, đối với trải nghiệm người dùng, bạn muốn người dùng không thể nhập nhiều hơn một số nhất định, hãy sử dụng Javascript/jQuery, như đã thấy trong này example

1

Phát biểu của HTML 4.01 không có loại như "số". Phát biểu của HTML 5 FF và IE chưa biết loại số nếu http://www.w3schools.com/html5/html5_form_input_types.asp là chính xác.

/chỉnh sửa: Vì vậy, FF và IE có thể dự phòng văn bản và đây là lý do tại sao maxlength sẽ hoạt động.

13

Thuộc tính maxlength không áp dụng cho một đầu vào của type = "number"

Từ W3 HTML5 đặc tả về type = "number"

Các thuộc tính nội dung sau đây phải không được xác định và không áp dụng cho phần tử: chấp nhận, alt, được chọn, tên đệm, định dạng, formenctype, formmethod, formnovalidate, mục tiêu, chiều cao, maxlength, nhiều, mẫu, kích thước, src và chiều rộng.

Nguồn: http://dev.w3.org/html5/spec/Overview.html#number-state-type-number (dưới Sổ sách kế toán chi tiết)

Trong FF và IE, đầu vào đang giảm trở lại là một đầu vào văn bản và do đó, maxlength áp dụng cho đầu vào. Khi FF và IE triển khai type = "number", chúng cũng nên thực hiện nó theo cách mà maxlength không áp dụng.

+0

không phải tiêu chuẩn tối thiểu = "10000000000" max = làm việc "99999999999" cho 11 ký tự? Nó không hoạt động trên máy của tôi, không phải trên chrome hoặc safari (di động) – siniradam

3

Đối với những người vẫn không thể làm cho nó hoạt động ...Hãy thử điều này để cháy lên các miếng đệm số béo:

<input type="number" name="no1" maxlength="1" size="1" max="9" pattern="[0-9]*" /> 

Và js:

$('input[name="no1"]').keypress(function() { 
    if (this.value.length >= 1) { 
     return false; 
    } 
}); 
2

Dưới đây là một ví dụ sử dụng type="number"maxlength, làm việc với Chrome, IE và những người khác. Hy vọng nó giúp!

<!DOCTYPE html> 
<html> 

    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 

     </script> 
     <script> 
      function test(id, event) { 
       var element = $("#" + id); 
       var len = element.val().length + 1; 
       var max = element.attr("maxlength"); 

       var cond = (46 < event.which && event.which < 58) || (46 < event.keyCode && event.keyCode < 58); 

       if (!(cond && len <= max)) { 
        event.preventDefault(); 
        return false; 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <input id="test" size="3" type="number" maxlength="3" onkeypress="test(this.id, event)"> 
    </body> 

</html> 
+0

Mã này hoạt động rất hoàn hảo ngay cả trong Chrome và Safari để nhập bằng số kiểu. Cảm ơn!! Điều này đã cứu ngày của tôi !! –

2

Độ dài tối đa sẽ không hoạt động với <input type="number" cách tốt nhất tôi biết là sử dụng sự kiện oninput để giới hạn độ dài tối đa. Vui lòng xem mã bên dưới.

<input name="somename" 
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" 
    type = "number" 
    maxlength = "6" 
/> 
+0

imho, giải pháp tốt nhất – Boris

Các vấn đề liên quan