Loại đầu vào HTML5 = giá trị số trống trong Webkit nếu có dấu cách hoặc ký tự không phải là số không?

Question

Đây là hành vi lạ đối với tôi nhưng trên trình duyệt Webkit (Chrome/Safari, không phải Firefox) nếu tôi bao gồm dấu cách trong một số các số trong một <input type=number> thì đầu vào đó value.

Xem JSFiddle này: http://jsfiddle.net/timrpeterson/CZZEX/5/

Dưới đây là các mã:

<input id='withOutspace' type='number' value='123'> 
<input id='with_space' type='number' value='123 123'> 
<button>click</button> 

$('button').click(function(){ 
    alert("withOut:"+$('#withOutspace').val()+" |||| with:"+$('#with_space').val()); 
}); 

Nếu bạn đi đến this JSFiddle, bạn sẽ nhận thấy rằng with_space đầu vào là rỗng. Nhưng nếu bạn đặt nó vào trong đó một số có một dấu cách hoặc bất kỳ ký tự không phải là số, cảnh báo sẽ nói rằng đầu vào trống.

Rõ ràng, đây là một thảm họa để xác thực biểu mẫu với số thẻ tín dụng, v.v. vì vậy, có ai có hack vì điều này không?

Answer 1

Hack là sử dụng type="tel" thay vì type="number".

này giải quyết được 2 vấn đề chính:

1. Nó kéo lên một bàn phím số trên thiết bị di động
2. Nó xác nhận (và là không trống) với số hoặc không số như đầu vào.

Xin xem JSFiddle này: http://jsfiddle.net/timrpeterson/CZZEX/6/

Answer 2

Bạn đang đặt trường nhập số vào một chuỗi không phải là số. Bạn đã mong đợi điều gì xảy ra? Toàn bộ vấn đề là các trường này không cho phép hoặc chấp nhận đầu vào không phải là số. Chúng là documented khi chỉ chấp nhận giá trị floating point.

Không có "hack" sẵn có hoặc bắt buộc; giải pháp là ngừng sử dụng trường nhập number cho giá trị không phải là số. Thẻ tín dụng, số điện thoại, v.v. những thứ này là không phải số. Chúng chứa các chữ số là một tập hợp con của các ký tự hợp lệ, nhưng chúng cũng chứa các ký tự hoàn toàn không phải số như dấu cách, dấu gạch nối và dấu ngoặc đơn. Chúng cần được lưu trữ và xử lý như các chuỗi thông thường.

Sử dụng <input type="text"/>.

Answer 3

Tôi có thể đề nghị hai cách. 1. chars Ngăn chặn trong input type

# updated to support more numerical characters related 
$(window).keydown(function(e) { 
    if($('input[type=number]').index($(e.target))!=-1) { 
    if(
     ($.inArray(e.keyCode, [48,49,50,51,52,53,54,55,56,57,58,96,97,98,99,100,101,102,103,104,105,8,13,190,189]) == -1) // digits, digits in num pad, 'back', 'enter', '.', '-' 
     || (e.keyCode == 190 && $(e.target).val().indexOf(".") != -1) // not allow double dot '.' 
     || (e.keyCode == 190 && $(e.target).val().length == 0) // not allow dot '.' at the begining 
    ) { 
     e.preventDefault(); 
    } 
    } 
}); 

hoặc 2. Thay đổi đầu vào của trên bay

$('input[type=number]').focus(function() { 
    $(this).prop('type', 'text'); 
}); 

này cho phép đặt mọi thứ bạn muốn và thay đổi loại của nó lại onblur

$(this).blur(function() { 
    $(this).prop('type', 'number'); 
}); 

Nhưng vẫn còn bạn không thể lưu trữ các giá trị không phải là số trong đầu vào với loại = số, vì vậy val() sẽ luôn trả về chuỗi rỗng nếu nó gặp char hoặc dấu cách.

Vì vậy, ít nhất bạn phải gỡ bỏ tất cả rác với .replace(/[^\d]/g, '') - có nghĩa là "loại bỏ tất cả trừ số" trước khi bạn thay đổi gõ lại

Trong my example Tôi thấy cả hai phương pháp + giá trị đầu vào rõ ràng.

Answer 4

Hack My cho vấn đề này bao gồm những điều sau đây: (i sử dụng jQuery xác nhận):

$(document).on('keyup', '[type="number"]', function() { 
     if (this.validity.badInput) { 
      $(this).attr('data-badinput', true); 
     } 
    }); 

Sau đó trong phương pháp validator tôi làm điều này:

$.validator.addMethod('isInteger', function (value, element, parameterValue) { 
     if ($(element).attr('data-badinput')) { 
      //We know nasty browser always clears incorrect input, so empty string will look OK next time 
      $(element).removeAttr('data-badinput'); 
      return false; 
     } 
     return !value || /^-?\d+$/.test(value); 
    });