tại sao <input type = "number" maxlength = "3"> không hoạt động trong Safari?

Question

Tôi muốn có đầu vào có tối đa 3 ký tự. Trong Firefox tất cả mọi thứ hoạt động tốt tôi chỉ có thể viết 3 số bên trong đầu vào - nhưng trong safari bạn có thể viết rất nhiều số bên trong.

Bạn có thể kiểm tra nó trong cả hai trình duyệt với điều này: http://flowplayer.org/tools/demos/validator/custom-validators.htm

Để bây giờ tôi nhận ra nó với một plugin Validate - nhưng chỉ quan tâm tôi muốn biết tại sao không phải là làm việc này?

EDIT:

với điều này nó làm việc

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/> 

câu trả lời: How can I prevent letters inside a text element?

Answer 1

Tôi đã thực hiện nó với:

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/> 

và sau đó trong JavaScript tôi ngăn chặn các chữ cái:

$("#myField").keyup(function() { 
    $("#myField").val(this.value.match(/[0-9]*/)); 
}); 

Answer 2

Về cơ bản Max và Min thuộc tính không được hỗ trợ trong trình duyệt Safari được nêu ra. Tôi có thể thấy không có lỗ hổng trong cú pháp. Bạn có đang sử dụng phiên bản Safari 1.3+ không? hoặc dưới đó? Bởi vì maxlength tài sản được hỗ trợ từ safari 1.3+.

Answer 3

tôi đã sử dụng một cái gì đó rất giống với @Jules câu trả lời ngoại trừ ông sẽ không cho phép sử dụng các phím như shift + home. Vì chúng tôi đang xác thực các số tôi vừa sử dụng isNaN trong chức năng khóa.

$("#myField").keyup(function() { 
    var e = $("#myField"); 
    if(isNaN(e.val())){ 
     e.val(e.val().match(/[0-9]*/)); 
    } 
}); 

Với ...

<input id="#myField" inputmode="numeric" maxlength="3" pattern="([0-9]{3})" type="text" /> 

Answer 4

Bạn có thể thử kiểu user = "text" và oninput như dưới đây. Điều này sẽ chỉ cho phép các con số.

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

Answer 5

Đây là giải pháp đơn giản hơn. Đối với tôi, nó hoạt động

<input type="number" id="cvv"> 


$("#cvv").on("keypress", function(evt) { 
    var keycode = evt.charCode || evt.keyCode; 
    if (keycode == 46 || this.value.length==3) { 
    return false; 
    } 
}); 

khối JS sẽ ngăn chặn "." (Dấu chấm) để không thể nhập nổi. Chúng tôi đang giữ kiểu đầu vào là số vì vậy nó sẽ chỉ là số làm đầu vào. Nếu chiều dài giá trị là 3 thì nó sẽ trả về false, vì vậy chiều dài đầu vào cũng bị hạn chế.

Answer 6

https://jsfiddle.net/zxqy609v/8/

function fixMaxlength(inputNumber) { 
    var maxlength = $(inputNumber).attr("maxlength"); 
    $(inputNumber).keyup(function (evt) { 
    this.value = this.value.substring(0, maxlength); 
    this.value = this.value.replace(/\D/g, ''); 
    }); 
} 

Answer 7

Sử dụng onKeyDown chiều dài có thể bị hạn chế

<input type="number" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;"> 

Chúc mừng Mã hóa :)