Hướng dẫn how do you input a decimal number in html? - làm thế nào để bạn nhập một số thập phân trong html?

Tôi có một

6 và tôi muốn hạn chế đầu vào của người dùng đối với các số hoặc số hoàn toàn có số thập phân lên đến 2 thập phân.

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

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

Đã hỏi ngày 3 tháng 12 năm 2015 lúc 3:55Dec 3, 2015 at 3:55

5

Trong trường hợp bất kỳ ai đang tìm kiếm một regex chỉ cho phép các số có 2 vị trí 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:

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); 
    }
  }, 1);
});

Đã trả lời ngày 13 tháng 9 năm 2017 lúc 17:51Sep 13, 2017 at 17:51

Weston Gangerweston GangerWeston Ganger

6.0203 Huy hiệu vàng39 Huy hiệu bạc39 Huy hiệu Đồng3 gold badges39 silver badges39 bronze badges

10

Đối với tiền tệ, tôi đề nghị:

Amount $
    

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 là Onblur. Bạn không cần

7 nếu bạn có

8 và bạn không cần

8 nếu bạn có

7. Vì vậy, bạn có thể trở lại

$(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); 
    }
  }, 1);
});

1 với mã của tôi vì mẫu này sẽ xác thực nó bằng mọi cách.

Nếu bạn muốn xác nhận Onblur, tôi tin rằng việc cho người dùng một cue trực quan cũng hữu ích như tô màu cho nền màu đỏ. Nếu trình duyệt của người dùng không hỗ trợ

$(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); 
    }
  }, 1);
});

2, nó sẽ dự phòng đến

$(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); 
    }
  }, 1);
});

3. 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 trích JavaScript của tôi không ngăn được biểu mẫu gửi, nhưng nó mang lại một gợi ý trực quan. Vì vậy, đối với những người có hỗ trợ HTML5 kém và những người cố gắng hack vào cơ sở dữ liệu với JavaScript bị vô hiệu hóa hoặc giả mạo các yêu cầu HTTP, bạn cần xác thực trên máy chủ một lần nữa. Điểm với xác thực trên mặt trước là 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, việc dựa vào các tính năng HTML5 là tốt, điều kiện mã vẫn sẽ hoạt động và bạn có thể xác nhận ở phía sau.

Đã trả lời ngày 3 tháng 12 năm 2015 lúc 4:41Dec 3, 2015 at 4:41

UltimaterultimaterUltimater

4.4112 Huy hiệu vàng29 Huy hiệu bạc43 Huy hiệu đồng2 gold badges29 silver badges43 bronze badges

2

Bước 1: Kết nối hộp đầu vào số HTML của bạn vào sự kiện Onchange Hook your HTML number input box to an onchange event

myHTMLNumberInput.onchange = setTwoNumberDecimal;

hoặc trong mã HTML

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

$(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); 
    }
  }, 1);
});

4

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 phương thức

$(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); 
    }
  }, 1);
});

5. Xem tài liệu MDN.

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

Robbie JW

6991 Huy hiệu vàng10 Huy hiệu bạc22 Huy hiệu đồng1 gold badge10 silver badges22 bronze badges

Đã trả lời ngày 3 tháng 12 năm 2015 lúc 4:41Dec 3, 2015 at 4:41

3

Ultimaterultimater

4.4112 Huy hiệu vàng29 Huy hiệu bạc43 Huy hiệu đồng

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

0

Bước 1: Kết nối hộp đầu vào số HTML của bạn vào sự kiện OnchangeDec 3, 2015 at 4:26

hoặc trong mã HTMLNilesh Gajare

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

$(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); 
    }
  }, 1);
});

43 gold badges40 silver badges70 bronze badges

3

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

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

1

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 phương thức

$(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); 
    }
  }, 1);
});

5. Xem tài liệu MDN.Jul 5, 2018 at 1:48

Robbie JWSamohtVII

6991 Huy hiệu vàng10 Huy hiệu bạc22 Huy hiệu đồng2 silver badges12 bronze badges

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

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

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

2

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

3

Đã trả lời ngày 3 tháng 12 năm 2015 lúc 4:26

Nilesh Gajarenilesh GajareSep 6, 2021 at 13:57

6.2113 Huy hiệu vàng40 Huy hiệu bạc70 Huy hiệu đồng

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

4

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

Đã trả lời ngày 5 tháng 7 năm 2018 lúc 1:484 gold badges12 silver badges32 bronze badges

SamohtviisamohtviiOct 25 at 14:25

1372 Huy hiệu bạc12 Huy hiệu Đồng

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

5

Tôi đã có cùng một yêu cầu nhưng sau khi kiểm tra tất cả các câu trả lời này, tôi nhận ra rằng không có hỗ trợ sẵn sàng nào để chặn người dùng gõ một số điểm số thập phân cụ thể.

$(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); 
    }
  }, 1);
});

6 rất hữu ích khi xác thực đầu vào cho số thập phân nhưng vẫn không ngăn người dùng nhập bất kỳ số thập phân nào. Trong trường hợp của tôi, tôi muốn có một giải pháp sẽ ngăn người dùng nhập số thập phân không hợp lệ. Vì vậy, tôi đã tạo chức năng JavaScript tùy chỉnh của riêng mình sẽ thực thi người dùng bất kỳ quy tắc thập phân nào. Có một vấn đề hiệu suất nhỏ nhưng đối với kịch bản của tôi, bạn có một độ trễ rất nhỏ để đảm bảo rằng người dùng không gõ các vị trí thập phân không hợp lệ. Nó có thể hữu ích cho những người muốn ngăn người dùng nhập giá trị thập phân không hợp lệ trên đầu vào.

Bạn có thể sử dụng giải pháp này với

$(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); 
    }
  }, 1);
});

6 nếu bạn muốn. Bạn có thể sử dụng chức năng dưới đây trên sự kiện phần tử

$(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); 
    }
  }, 1);
});

8 của mình. Nếu hiệu suất là rất quan trọng đối với bạn, thì hãy suy nghĩ sử dụng điều này trên sự kiện

$(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); 
    }
  }, 1);
});

9 thay vì

$(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); 
    }
  }, 1);
});

8. Và vui lòng chỉ định số lượng vị trí thập phân tối đa được phép trong đầu vào trong thuộc tính

Amount $
    

1. Nó có thể có các giá trị từ

Amount $
    

2 đến bất kỳ số nào.Sep 25, 2017 at 22:49

Tôi có thể sử dụng

Amount $
    

3 để xác định giá trị không hợp lệ nhưng tôi cũng phải hoàn nguyên thay đổi trong đầu vào. Vì vậy, tôi quyết định không sử dụng

Amount $
    

3.

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

6

Đã trả lời ngày 6 tháng 9 năm 2021 lúc 13:57Feb 11 at 4:46

Với Bootstrap chỉ cần thêm

Amount $
    

5, đã sắp xếp vấn đề của tôi.TreeAndLeaf

Michael M.1 gold badge12 silver badges15 bronze badges

1

4.2784 Huy hiệu vàng12 Huy hiệu bạc32 Huy hiệu Đồng

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

7

---

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

8

Đã trả lời ngày 25 tháng 10 lúc 14:25Feb 14 at 20:43

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

9

Sử dụng mã nàyFeb 24 at 14:21

Theo mặc định, giá trị bước cho các phần tử đầu vào HTML5 là bước = "1".

0

Trên kịch bản:

1

Đã trả lời ngày 7 tháng 7 lúc 4:40Jul 7 at 4:40

Câu hỏi này đã được trả lời nhưng bạn có thể cho phép số thập phân với thuộc tính bước. Bạn có thể đọc thêm về nó ở đây: Cho phép các giá trị decimal-decimal

Đã trả lời ngày 9 tháng 11 lúc 10:07Nov 9 at 10:07

Bạn có thể sử dụng điều này. Móc phản ứng

2

Đã trả lời ngày 9 tháng 2 năm 2021 lúc 12:29Feb 9, 2021 at 12:29

chỉ viết

3

Lang = 'NB "Hãy để bạn viết số thập phân của mình bằng dấu phẩy hoặc thời gian

Đã trả lời ngày 20 tháng 3 năm 2019 lúc 6:46Mar 20, 2019 at 6:46

1

Trên đầu vào:

4

Trên kịch bản:

5

Djmcmayhem

7.0453 Huy hiệu vàng40 Huy hiệu bạc61 Huy hiệu đồng3 gold badges40 silver badges61 bronze badges

Đã trả lời ngày 20 tháng 10 năm 2017 lúc 8:15Oct 20, 2017 at 8:15

1

Loại đầu vào cho thập phân trong HTML là gì?

Bạn có thể sử dụng số thập phân trong mã hóa không?

Chức năng nào được sử dụng để cho phép người dùng nhập các giá trị thập phân?