Tôi có một <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
5 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 đó? <input type="number" required name="price" min="0" value="0" step="any">
Đã 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: <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);
}
}, 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 5.9103 Huy hiệu vàng39 Huy hiệu bạc38 Huy hiệu Đồng3 gold badges39 silver badges38 bronze badges
10 Đối với tiền tệ, tôi đề nghị: <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 là Onblur. Bạn không cần <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
6 nếu bạn có <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
7 và bạn không cần <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
7 nếu bạn có <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
6. 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);
});
0 với mã của tôi vì mẫu này sẽ xác nhận 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);
});
1, 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);
});
2. 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ạc42 Huy hiệu Đồng2 gold badges29 silver badges42 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 <input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />
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);
});
3function 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);
});
4. Xem tài liệu MDN.toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer
Robbie JW 6791 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 <input type="number" step="0.01" class="form-control" />
4.4112 Huy hiệu vàng29 Huy hiệu bạc42 Huy hiệu Đồng ^\d*(\.\d{0,2})?$
0Bướ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);
});
33 gold badges39 silver badges68 bronze badges
3 function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
}
^\d*(\.\d{0,2})?$
1Bạ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);
});
4. Xem tài liệu MDN.Jul 5, 2018 at 1:48
Robbie JWSamohtVII 6791 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.1933 Huy hiệu vàng39 Huy hiệu bạc68 Huy hiệu Đồng ^\d*(\.\d{0,2})?$
4Tô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:48Sep 25, 2017 at 22:49 Samohtviisamohtvii ^\d*(\.\d{0,2})?$
51372 Huy hiệu bạc12 Huy hiệu ĐồngFeb 11 at 4:46
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);
});
5 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.TreeAndLeafBạ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);
});
5 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);
});
7 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);
});
8 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);
});
7. 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 <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>
0. Nó có thể có các giá trị 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>
1 đến bất kỳ số nào.1 gold badge12 silver badges15 bronze badges 1 Tôi có thể sử dụng <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>
2 để 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 <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>
2.^\d*(\.\d{0,2})?$
6
^\d*(\.\d{0,2})?$
7 Đã trả lời ngày 6 tháng 9 năm 2021 lúc 13:57Feb 14 at 20:43
^\d*(\.\d{0,2})?$
8Sử 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". ^\d*(\.\d{0,2})?$
9 Đã trả lời ngày 25 tháng 9 năm 2017 lúc 22:49 <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
0Tôi đã có một trải nghiệm chỉnh sửa kỳ lạ với một số giải pháp này. Điều này dường như hoạt động khá tốt từ quan điểm của người dùng (chỉ can thiệp khi cần thiết):Jul 7 at 4:40 Đã trả lời ngày 11 tháng 2 lúc 4:46 <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
1TreeandleaftreeandleafFeb 9, 2021 at 12:29 9441 Huy hiệu vàng12 Huy hiệu bạc15 Huy hiệu đồng <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
2Chỉ có 3 giá trị đầu vào điểm thập phân trong TextBox bằng JavaScript. Đã 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: <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
3Trên kịch bản: <input name="my_field" pattern="^\d*(\.\d{0,2})?$" />
4 Djmcmayhem 7.0353 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
Làm cách nào để giới hạn các vị trí thập phân trong HTML?
Để tóm tắt lại, bạn có thể sử dụng phương thức .tofixed () để hạn chế các vị trí thập phân.use the . toFixed() method to limit decimal places.
Làm thế nào để bạn có được 2 vị trí thập phân trong HTML?
Sử dụng phương thức tofixed () để định dạng một số đến 2 số thập phân, ví dụ:Num.tofixed (2). to format a number to 2 decimal places, e.g. num. toFixed(2) .
Làm thế nào để bạn giới hạn các vị trí thập phân ở 2?
Làm tròn một số thập phân đến hai vị trí thập phân giống như làm tròn nó đến vị trí thứ trăm, đây là nơi thứ hai ở bên phải của dấu thập phân.Ví dụ, 2.83620364 có thể được làm tròn đến hai vị trí thập phân là 2,84 và 0,7035 có thể được làm tròn đến hai vị trí thập phân là 0,70.rounding it to the hundredths place, which is the second place to the right of the decimal point. For example, 2.83620364 can be round to two decimal places as 2.84, and 0.7035 can be round to two decimal places as 0.70.
Làm thế nào để tôi hạn chế số thập phân?
Bây giờ bạn có thể giới hạn các vị trí thập phân.Chọn ô số và trong menu, chuyển đến Định dạng> Số> Thêm định dạng> Định dạng số tùy chỉnh. | 
