jQuery val từ chối trả về đầu vào không phải số từ trường số (Trong Chrome)

Question

Chỉ cần tình cờ gặp một số điều kỳ lạ trong jQuery, trong khi viết một số mã xác nhận- Tôi có trường "số" html5;

<input type="number" class="required numeric" /> 

Kịch bản của tôi sẽ xem xét mọi trường trên trang kiểm tra các lớp và xác thực khi cần. Tôi nhận thấy một cách kỳ lạ rằng nếu tôi nhập 'X' vào một trong các trường số của tôi, tôi nhận được lỗi "Vui lòng nhập giá trị vào trường này" thay vì lỗi "đây phải là số". Sau khi một số đầu gãi và rất nhiều gỡ lỗi tôi gõ lên một jsFiddle để giới thiệu lý thuyết của tôi-nó xuất hiện nếu bạn nhập một ký tự vào một trường số, sau đó cố gắng làm một .val() từ jquery nó sẽ trả về không có gì - như thể trường trống (Tôi đã xem qua điều này trong Chrome- không chắc chắn nếu nó hoạt động như thế này trên tất cả các trình duyệt);

http://jsfiddle.net/shawson/SE46L/3/

Đây là fiddle- nhập một số con số, sau đó một vài chữ cái để xem crazyness. Bất cứ ai biết nếu điều này là do thiết kế, và nếu như vậy ... tại sao?

Answer 1

Đây không phải là vấn đề về jQuery. Bạn sẽ nhận được kết quả tương tự nếu bạn sử dụng phần tử gốc.value (ví dụ: với getElementByID ('something'). Value). Đó là cách giải thích cách Chrome xử lý với loại đầu vào = số và bạn có thể chọn để làm việc xung quanh nó bằng cách sử dụng type = text và thuộc tính pattern.

Xem this older question để biết thêm thông tin cơ bản.

Answer 2

Đến cùng một vấn đề trong Chrome, sẽ không cung cấp giá trị cho loại = số khi chúng không phải là số. Công việc xung quanh tôi đặt vào là chỉ cần đặt giá trị cho giá trị của chính nó. Bằng cách đó, nó sẽ không cho phép bạn nhập các giá trị không phải số ở vị trí đầu tiên. Đó là một hack nhưng nó hoạt động.

ví dụ:

$('body').find('input[type="number"]').each(function(k,v) { 

    $(this).on('keyup blur', function() { 
     $(this).val($(this).val()); 
    }); 

});