มีประเภทอินพุตแบบลอยใน HTML5 หรือไม่

จากhtml5.orgแอตทริบิวต์ "value" ของประเภทอินพุตหากระบุและไม่ว่างต้องมีค่าที่เป็นเลขทศนิยมที่ถูกต้อง

กระนั้นก็เป็นเพียงแค่ (ใน Chrome เวอร์ชันล่าสุด), การควบคุม "updown" ด้วยจำนวนเต็มไม่ใช่ลอยตัว:

<input type="number" id="totalAmt"></input>

มีองค์ประกอบอินพุตแบบ floating point ที่เป็นพื้นฐานของ HTML5 หรือวิธีการทำให้ชนิดอินพุตตัวเลขทำงานกับการลอยได้ไม่ใช่ ints หรือไม่? หรือฉันต้องหันไปใช้ปลั๊กอิน jQuery UI?

numberประเภทมีstepมูลค่าการควบคุมซึ่งตัวเลขที่ถูกต้อง (พร้อมด้วยmaxและmin) 1ซึ่งเริ่มต้นที่ ค่านี้ยังใช้โดยการใช้งานสำหรับปุ่ม stepper (เช่นการกดขึ้นเพื่อเพิ่มstep)

เพียงแค่เปลี่ยนค่านี้เป็นสิ่งที่เหมาะสม สำหรับเงินคาดว่าจะมีทศนิยมสองตำแหน่ง:

<input type="number" step="0.01">

(ฉันจะตั้งค่าmin=0ถ้ามันเป็นค่าบวกเท่านั้น)

หากคุณต้องการอนุญาตให้มีจำนวนทศนิยมใด ๆ คุณสามารถใช้step="any"(แต่สำหรับสกุลเงินฉันขอแนะนำให้ใช้0.01) ใน Chrome และ Firefox, ปุ่ม stepper จะเพิ่มขึ้น / ลดลงโดยที่ 1 anyเมื่อใช้ (ขอบคุณคำตอบของมิคาลสเตฟานอว์สำหรับการชี้anyและดูข้อมูลจำเพาะที่เกี่ยวข้องที่นี่ )

นี่คือสนามเด็กเล่นที่แสดงว่าขั้นตอนต่าง ๆ มีผลต่ออินพุตประเภทต่างๆอย่างไร:

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>

ตามปกติฉันจะเพิ่มบันทึกย่อ: จำไว้ว่าการตรวจสอบฝั่งไคลเอ็นต์เป็นเพียงความสะดวกสบายให้กับผู้ใช้ คุณต้องตรวจสอบด้านเซิร์ฟเวอร์!

Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

แต่ถ้าคุณต้องการให้ตัวเลขทั้งหมดถูกต้องเป็นจำนวนเต็มและทศนิยม ในกรณีนี้ตั้งค่าขั้นตอนเป็น "ใด ๆ "

<input type="number" step="any" />

ใช้งานได้สำหรับฉันใน Chrome ไม่ได้ทดสอบในเบราว์เซอร์อื่น

คุณสามารถใช้ได้:

<input type="number" step="any" min="0" max="100" value="22.33">

คุณสามารถใช้แอ็ตทริบิวต์ step กับหมายเลขชนิดอินพุต:

<input type="number" id="totalAmt" step="0.1"></input>

step="any"จะอนุญาตให้ใช้ทศนิยมใด ๆ
step="1"จะไม่อนุญาตให้ใช้ทศนิยม
step="0.5"จะอนุญาต 0.5 1; 1.5; ...
step="0.1"จะอนุญาตให้ 0.1; 0.2; 0.3; 0.4; ...

ตามคำตอบนี้

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

ความหมาย:

รหัส Char:

• 48-57 เท่ากับ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0 คือBackspace(ไม่จำเป็นต้องรีเฟรชหน้าใน Firefox)
• 46 คือ dot

&&เป็นAND, ||เป็นORผู้ประกอบการ

ถ้าคุณลองลอยด้วยเครื่องหมายจุลภาค:

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

สนับสนุน Chromium และ Firefox (Linux X64) (เบราว์เซอร์อื่น ๆ ที่ฉันไม่มีอยู่)

ฉันทำเช่นนั้น

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

จากนั้นฉันนิยาม min เป็น 0.4 และ max ใน 0.7 ด้วยขั้นตอน 0.01: 0.4, 0.41, 0,42 ... 0.7

ฉันเพิ่งมีปัญหาเดียวกันและฉันจะแก้ไขได้โดยเพียงแค่การใส่เครื่องหมายจุลภาคและไม่ได้เป็นระยะเวลา / หยุดเต็มจำนวนเพราะการแปลภาษาฝรั่งเศส

ดังนั้นจึงใช้งานได้กับ:

2 ก็โอเค

2,5 ก็โอเค

2.5 คือ KO (จำนวนถือว่าผิดกฎหมายและคุณได้รับค่าว่าง)