Cho phép 2 vị trí thập phân trong <kiểu đầu vào = Số thứ tự>

Tôi có một <input type="number">và tôi muốn hạn chế đầu vào của người dùng hoàn toàn là số hoặc số có số thập phân lên đến 2 chữ số thập phân.

Về cơ bản, tôi đang yêu cầu một đầu vào giá.

Tôi muốn tránh làm regex. Có cách nào để làm điều đó?

<input type="number" required name="price" min="0" value="0" step="any">

Thay vì step="any", cho phép bất kỳ số lượng vị trí thập phân, sử dụng step=".01", cho phép tối đa hai vị trí thập phân.

Thêm chi tiết trong thông số: https://www.w3.org/TR/html/sec-forms.html#the-step-attribution

Nếu trường hợp bất cứ ai đang tìm kiếm một regex chỉ cho phép các số có 2 chữ số thập phân tùy chọn

^\d*(\.\d{0,2})?$

Ví dụ, tôi đã tìm thấy giải pháp dưới đây khá đáng tin cậy

HTML:

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS / JQuery:

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});

Đối với tiền tệ, tôi muốn đề xuất:

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

Xem http://jsfiddle.net/vx3axsk5/1/

Các thuộc tính HTML5 "bước", "min" và "mẫu" sẽ được xác thực khi biểu mẫu được gửi, không phải onblur. Bạn không cần stepnếu bạn có patternvà bạn không cần patternnếu bạn có step. Vì vậy, bạn có thể trở lại step="any"với mã của tôi vì mẫu sẽ xác nhận nó bằng mọi cách.

Nếu bạn muốn xác thực onblur, tôi tin rằng việc cung cấp cho người dùng một dấu hiệu trực quan cũng hữu ích như tô màu nền đỏ. Nếu trình duyệt của người dùng không hỗ trợ, type="number"nó sẽ dự phòng type="text". Nếu trình duyệt của người dùng không hỗ trợ xác thực mẫu HTML5, đoạn mã JavaScript của tôi sẽ không ngăn biểu mẫu gửi, nhưng nó đưa ra một dấu hiệu trực quan. Vì vậy, đối với những người có hỗ trợ HTML5 kém và những người đang cố gắng xâm nhập vào cơ sở dữ liệu bằng JavaScript bị vô hiệu hóa hoặc giả mạo các Yêu cầu HTTP, bạn cần phải xác thực lại trên máy chủ bằng mọi cách. Điểm có xác nhận ở mặt trước là cho trải nghiệm người dùng tốt hơn. Vì vậy, miễn là hầu hết người dùng của bạn có trải nghiệm tốt, thật tốt khi dựa vào các tính năng HTML5 với điều kiện mã sẽ vẫn hoạt động và bạn có thể xác thực ở mặt sau.

Bước 1: Nối hộp nhập số HTML của bạn vào một sự kiện trao đổi

myHTMLNumberInput.onchange = setTwoNumberDecimal;

hoặc trong mã HTML

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

Bước 2: Viết setTwoDecimalPlacephương thức

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

Bạn có thể thay đổi số lượng vị trí thập phân bằng cách thay đổi giá trị được truyền vào toFixed()phương thức. Xem tài liệu MDN .

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

Tôi thấy sử dụng jQuery là giải pháp tốt nhất của tôi.

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Hãy thử điều này để chỉ cho phép 2 số thập phân trong loại đầu vào

<input type="number" step="0.01" class="form-control"  />

Hoặc Sử dụng jQuery theo đề xuất của @SamohtVII

$( "#ELEMENTID" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Sử dụng mã này

<input type="number" step="0.01" name="amount" placeholder="0.00">

Theo mặc định Giá trị bước cho các yếu tố đầu vào HTML5 là step = "1".

chỉ viết

<input type="number" step="0.1" lang="nb">

lang = 'nb "cho phép bạn viết số thập phân của mình bằng dấu phẩy hoặc dấu chấm

Về đầu vào:

step="any"
class="two-decimals"

Trên kịch bản:

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});