อนุญาตให้มีทศนิยม 2 ตำแหน่งใน <input type =“ number”>

ฉันมี<input type="number">และฉันต้องการที่จะ จำกัด การป้อนข้อมูลของผู้ใช้ให้เป็นตัวเลขหรือตัวเลขโดยมีทศนิยมสูงสุด 2 ตำแหน่ง

โดยทั่วไปฉันขอราคาป้อน

ฉันต้องการหลีกเลี่ยงการทำ regex มีวิธีทำหรือไม่?

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

แทนที่จะใช้step="any"ซึ่งอนุญาตให้ใช้จำนวนทศนิยมใด ๆ ให้ใช้step=".01"ซึ่งอนุญาตได้สูงสุดสองตำแหน่ง

รายละเอียดเพิ่มเติมในข้อมูลจำเพาะ: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

หากกรณีที่ทุกคนกำลังมองหา regex ที่อนุญาตเฉพาะตัวเลขที่มีทศนิยม 2 ตำแหน่งเป็นทางเลือก

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

ตัวอย่างเช่นฉันพบวิธีแก้ปัญหาด้านล่างเพื่อความน่าเชื่อถือ

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

สำหรับสกุลเงินฉันขอแนะนำ:

<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>

ดูhttp://jsfiddle.net/vx3axsk5/1/

คุณสมบัติ HTML5 "ขั้นตอน", "ขั้นต่ำ" และ "รูปแบบ" จะถูกตรวจสอบความถูกต้องเมื่อส่งแบบฟอร์มไม่ใช่บนเบลอ คุณไม่จำเป็นต้องstepถ้าคุณมีpatternและคุณไม่จำเป็นต้องมีถ้าคุณมีpattern stepดังนั้นคุณสามารถย้อนกลับstep="any"ด้วยรหัสของฉันได้เนื่องจากรูปแบบจะตรวจสอบความถูกต้องแล้ว

หากคุณต้องการตรวจสอบความถูกต้องของ onblur ฉันเชื่อว่าการให้คิวผู้ใช้ด้วยภาพนั้นมีประโยชน์เช่นกันเมื่อระบายสีพื้นหลังสีแดง หากเบราว์เซอร์ของผู้ใช้ไม่สนับสนุนtype="number"ก็จะ fallback type="text"ไป หากเบราว์เซอร์ของผู้ใช้ไม่สนับสนุนการตรวจสอบรูปแบบ HTML5 ข้อมูลโค้ด JavaScript ของฉันไม่ได้ป้องกันไม่ให้ส่งแบบฟอร์ม แต่จะให้คิวแบบภาพ ดังนั้นสำหรับผู้ที่มีการสนับสนุน HTML5 ต่ำและผู้ที่พยายามแฮ็คเข้าสู่ฐานข้อมูลโดยปิดการใช้งาน JavaScript หรือการปลอมคำขอ HTTP คุณจะต้องตรวจสอบความถูกต้องบนเซิร์ฟเวอร์อีกครั้ง จุดที่มีการตรวจสอบความถูกต้องของ front-end นั้นเพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้น ดังนั้นตราบใดที่ผู้ใช้ส่วนใหญ่ของคุณมีประสบการณ์ที่ดีมันก็ดีที่จะต้องพึ่งพาคุณสมบัติของ HTML5 หากรหัสยังใช้งานได้และคุณสามารถตรวจสอบความถูกต้องของแบ็คเอนด์

ขั้นตอนที่ 1: เชื่อมโยงกล่องใส่หมายเลข HTML ของคุณกับเหตุการณ์ onchange

myHTMLNumberInput.onchange = setTwoNumberDecimal;

หรือในรหัส HTML

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

ขั้นตอนที่ 2: เขียนsetTwoDecimalPlaceวิธีการ

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

คุณสามารถเปลี่ยนจำนวนตำแหน่งทศนิยมโดยการเปลี่ยนแปลงค่าที่ส่งผ่านไปยังtoFixed()วิธีการ ดูเอกสาร MDN

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

ฉันพบว่าการใช้ jQuery เป็นทางออกที่ดีที่สุดของฉัน

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

ลองใช้วิธีนี้เพื่อให้ได้ทศนิยมเพียง 2 ประเภทอินพุต

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

หรือใช้ jQuery ตามที่แนะนำโดย @SamohtVII

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

ใช้รหัสนี้

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

โดยค่าเริ่มต้นค่าขั้นตอนสำหรับองค์ประกอบอินพุต HTML5 คือ step = "1"

แค่เขียน

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

lang = 'nb "ให้คุณเขียนตัวเลขทศนิยมด้วยเครื่องหมายจุลภาคหรือจุด

บนอินพุต:

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

ในสคริปต์:

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