giá trị Nhận của <input type = "number"> với JS khi nó chứa các ký tự không phải số

Question

This jsfiddle demonstrates the following issue.

Ví dụ đơn giản nhất là:

<input id="number" type="number" value="1"> 
console.log(document.getElementById('number').value); 

này ghi 1 như mong đợi. Tuy nhiên, điều này:

<input id="number" type="number" value="1A"> 
console.log(document.getElementById('number').value); 

Chỉ cần ghi một chuỗi rỗng '', vì ký tự không phải là số trong giá trị. Một số thiết bị + trình duyệt (ví dụ: Chrome) cho phép bạn nhập các ký tự không phải số vào các đầu vào này.

Điều này gây phiền toái vì tôi muốn đầu vào loại = "số" cho các thiết bị hỗ trợ nó (ví dụ: iPhone, bàn phím số iPad). Tuy nhiên tôi muốn sử dụng javascript để ngăn chặn đầu vào bẩn từ đang được nhập - yêu cầu tìm nạp giá trị trên khóa - sau đó regex thay thế các ký tự không phải là số.

Dường như phương thức .val() của jQuery đưa ra kết quả tương tự.

Answer 1

Đây là những gì tôi đang tìm kiếm:

$('input[type=number]').keypress(function(e) { 
    if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) { 
    return false; 
    } 
}); 

Tôi hiểu việc ngăn chặn người dùng nhập vào có thể gây phiền nhiễu và điều này vẫn cho phép đầu vào không hợp lệ như 1.2.3

Tuy nhiên trong tình huống này đó là chính xác những gì tôi cần . Hy vọng rằng nó sẽ được sử dụng cho người khác. Nhờ @ int32_t cho đề xuất.

Answer 2

Bạn không được phép sử dụng <input type=number> cho những thứ không phải là số (theo nghĩa rất toán - nó cũng không hoạt động đối với số điện thoại hoặc mã zip) và việc xóa giá trị là cố ý.

Bạn có thể kiểm tra xem thiết bị hỗ trợ type=number và đính kèm dự phòng của bạn chỉ khi nó không:

var input = document.createElement('input'); 
input.setAttribute('type','number'); 
if (input.type != 'number') { // JS property won't reflect DOM attribute 
    polyfill_number(); 
} 

Ngoài ra (đặc biệt nếu số của bạn là một mã zip, số sê-ri, vv), bạn có thể sử dụng:

<input type=text pattern="[0-9]*"> 

và điều này cũng sẽ thay đổi bàn phím.