Làm cách nào để làm cho trường số HTML5 hiển thị số 0 theo sau?

Question

Tôi có một lĩnh vực:

<input type='number' /> 

Tôi muốn đấm vào 0.50 mà không có nó “sửa chữa nó” để 0.5, vì vậy nó sẽ hiển thị 0.50.

Answer 1

Tôi đã chơi một chút với điều này và xem thông số kỹ thuật. Nó nói rằng nó phải là một số dấu chấm động hợp lệ. Có một câu trong definition of a valid floating point number nó mang lại mà tôi chú ý:

Các đại diện tốt nhất của các số n như là một điểm số nổi là chuỗi thu được từ việc áp dụng các nhà điều hành ToString hoạt Javascript để n.

Điều này có nghĩa là định dạng sẽ luôn phù hợp với việc đánh giá số đó là gì, sau đó sử dụng JavaScript toString trên số đó. Vì vậy, không có dấu 0 sau đó.

Vì vậy, bạn sẽ phải sử dụng JavaScript. Điều này không đơn giản vì document.getElementById('numInput').value = '0.50'; vẫn được chỉnh sửa thành 0.5, do đó xác thực không được kích hoạt tại onchange nơi hành động mặc định có thể được ngăn chặn, nó được kích hoạt nội bộ.

Đây là giải pháp tốt nhất mà tôi có thể đưa ra ... đó là một chút của một hack, và sẽ cần một chút tinh chỉnh cho vững mạnh, nhưng hy vọng nó sẽ làm những gì bạn muốn:

var numInput = document.getElementById('numInput'); 
numInput.addEventListener('keypress', function() { 
    this.setAttribute('type', 'text'); 
}); 
numInput.addEventListener('click', function() { 
    this.setAttribute('type', 'number'); 
}); 

Vì vậy, nếu người dùng muốn nhập số bằng cách nhập, nó sẽ chuyển loại đầu vào thành văn bản, nhưng khi họ nhấp vào nó, nó sẽ chuyển đổi nó thành một số.

Nếu bạn luôn muốn 0s trailing không có vấn đề gì loại người dùng, sau đó bạn có thể làm điều đó một cái gì đó như thế này:

var numInput = document.getElementById('numInput'); 
numInput.addEventListener('blur', function() { 
    if (this.value === '') { 
     return; 
    } 
    this.setAttribute('type', 'text'); 
    if (this.value.indexOf('.') === -1) { 
     this.value = this.value + '.00'; 
    } 
    while (this.value.indexOf('.') > this.value.length - 3) { 
     this.value = this.value + '0'; 
    } 
}); 
numInput.addEventListener('focus', function() { 
    this.setAttribute('type', 'number'); 
}); 

Edit: Tôi nghĩ rằng giải pháp thứ hai là inline hơn với những gì người dùng có thể mong đợi, nhưng điều đó có nghĩa là nếu người dùng nhập 0.5 nó sẽ bị ép buộc 0.50, do đó, nó phụ thuộc nếu đó là những gì bạn muốn.

Answer 2

I kèm theo một trên ('thay đổi') sự kiện vào đầu vào bạn muốn có đuôi 0 của

$('.number-input').on('change', function(){ 
    $(this).val(parseFloat($(this).val()).toFixed(2)); 
}); 

Nó chỉ mất giá trị, phôi nó vào một float, làm cho nó vào một chuỗi các số số thập phân và đặt nó trở lại làm giá trị.