HTML5: ประเภทการป้อนตัวเลขที่ใช้จำนวนเต็มเท่านั้น

253

ฉันใช้เครื่องมือตรวจสอบ jQuery Tools ซึ่งใช้การตรวจสอบ HTML5 ผ่าน jQuery มันใช้งานได้ดีจนถึงตอนนี้ยกเว้นสิ่งหนึ่ง ในข้อกำหนด HTML5 ประเภทอินพุต "number" สามารถมีได้ทั้งจำนวนเต็มและจำนวนจุดลอยตัว ดูเหมือนว่าจะเป็นสายตาสั้นอย่างไม่น่าเชื่อเพราะมันจะเป็นเครื่องมือตรวจสอบที่มีประโยชน์เฉพาะเมื่อฟิลด์ฐานข้อมูลของคุณได้รับการลงนามหมายเลขจุดลอยตัว (สำหรับ ints ที่ไม่ได้ลงนามคุณจะต้องย้อนกลับไปยังการตรวจสอบ "รูปแบบ") ลูกศรสำหรับเบราว์เซอร์ที่รองรับ) มีประเภทอินพุตอื่นหรืออาจเป็นแอตทริบิวต์ที่จะ จำกัด อินพุตให้เป็นจำนวนเต็มที่ไม่ได้ลงนามเท่านั้น ฉันหาอะไรไม่ได้ขอบคุณ

แก้ไข

ตกลงฉันขอขอบคุณเวลาและความช่วยเหลือของคุณ แต่ฉันเห็นว่ามีหลายคนที่ไม่ได้ลงคะแนน: D การตั้งค่าขั้นตอนเป็น 1 ไม่ใช่คำตอบเนื่องจากไม่ได้ จำกัด อินพุต คุณยังสามารถพิมพ์ตัวเลขทศนิยมที่เป็นค่าลบลงในกล่องข้อความได้ นอกจากนี้ฉันตระหนักถึงการตรวจสอบรูปแบบ (ฉันพูดถึงในโพสต์ต้นฉบับของฉัน) แต่นั่นไม่ได้เป็นส่วนหนึ่งของคำถาม ฉันต้องการทราบว่า HTML5 อนุญาตการ จำกัด อินพุตของประเภท "number" เป็นค่าจำนวนเต็มบวกหรือไม่ สำหรับคำถามนี้คำตอบดูเหมือนว่าจะเป็น "ไม่มันไม่ได้" ฉันไม่ต้องการใช้การตรวจสอบรูปแบบเพราะจะทำให้เกิดข้อเสียบางอย่างเมื่อใช้การตรวจสอบความถูกต้องของ jQuery Tools แต่ตอนนี้ดูเหมือนว่าข้อกำหนดไม่อนุญาตให้ใช้วิธีที่สะอาดกว่านี้

jquery  html  validation  jquery-tools 
— Jaypea
แหล่งที่มา
3
ตั้งแต่ปี 2019 - ฉันไม่รู้ตั้งแต่เมื่อใด - numberอินพุต (ใน FF / Chrome / Safari อย่างน้อย) ตอนนี้ยอมรับเฉพาะจำนวนเต็มเป็นค่าเริ่มต้นเว้นแต่คุณจะตั้งค่าที่ชัดเจนสำหรับstepattr ที่อนุญาตให้ใช้ค่าทศนิยม step="0.01"เช่น: เอกสาร MDN ที่นี่ ในใจสองเรื่องนี้เพราะฉันคิดว่ามันเป็นค่าเริ่มต้นที่สมเหตุสมผล แต่ก็เป็นการเปลี่ยนแปลงที่ไม่ดี (ใช่มันส่งผลกระทบต่อโค้ดบางส่วนที่ฉันเขียน)
— Darragh Enright

คำตอบ:

326

https://www.w3.org/wiki/HTML/Elements/input/number

สิ่งที่ดีที่สุดที่คุณสามารถทำได้ด้วย HTML เท่านั้น

<input type="number" min="0" step="1"/>
ขยายตัวอย่างข้อมูล

— Aurélien Ooms
แหล่งที่มา
6
คุณอาจจะตั้งminไป1ตามที่เขาต้องการตัวเลขบวก (และตัวเลขไม่ได้ไม่ใช่เชิงลบ)
— Martin Thoma
1
@pwdst ฉันจะสองที่ <input type="number" min="0" step="1"/>เป็นคำตอบที่ถูกต้องที่สุดสำหรับคำถาม อย่างไรก็ตามมีจุดประสงค์อะไรในการมีทั้งคู่step="1"และpattern="\d+"? ฉันไม่สามารถพิมพ์ตัวเลขทศนิยมได้ทั้งสองกรณี
— Ashfaq เดนมาร์ก
27
สิ่งนี้ไม่ได้ผลสำหรับฉันกับ Chrome รุ่นล่าสุด ไม่อนุญาตให้พิมพ์ตัวอักษร แต่อนุญาตให้ใส่อักขระพิเศษได้
— Malavos
3
ทำไมฉันสามารถพิมพ์ e
— Grant อาทิตย์
4
@grantsun สำหรับเลขชี้กำลังเช่น 10e20
— sn3ll
181

ตั้งค่าstepแอตทริบิวต์เป็น1:

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

ดูเหมือนว่าจะมีข้อผิดพลาดเล็กน้อยใน Chrome ในขณะนี้ดังนั้นจึงอาจไม่ใช่ทางออกที่ดีที่สุดในขณะนี้

ทางออกที่ดีกว่าคือการใช้patternคุณลักษณะที่ใช้นิพจน์ทั่วไปเพื่อจับคู่อินพุต:

<input type="text" pattern="\d*" />

\dคือนิพจน์ทั่วไปของตัวเลข*หมายความว่ามันยอมรับมากกว่าหนึ่งในนั้น นี่คือตัวอย่าง: http://jsfiddle.net/b8NrE/1/

— JS-coder
แหล่งที่มา
2
ดังที่ JayPea ได้เรียนรู้เบราว์เซอร์บางตัวเท่านั้นที่สนับสนุนองค์ประกอบ HTML5 ทั้งหมดดังนั้นจึงเป็นการดีที่สุดที่จะมอบการลดระดับอย่างสง่างามตามที่คุณเสนอ
— DOK
6
การตรวจสอบความถูกต้อง @Zut HTML5 ไม่ได้ทำให้คุณไม่สามารถป้อนคีย์เหล่านั้นได้ มันป้องกันไม่ให้ส่งแบบฟอร์มพร้อมอักขระเหล่านั้น หากคุณส่งแบบฟอร์มที่มีประเภทnumberที่มีอักขระอื่น ๆ Chrome จะแสดงข้อความแสดงข้อผิดพลาด
— js-coder
2
@dotweb - ฉันเห็นจุดของคุณ ความแตกต่างระหว่างทั้งสองก็คือด้วยคุณสมบัติ number ตัวอักษรทั้งหมดจะถูกลบโดยอัตโนมัติเมื่อฉันยกเลิกการเลือก (ทริกเกอร์เบลอ) สำหรับอินพุต สิ่งนี้จะไม่เกิดขึ้นเมื่อใช้แอตทริบิวต์ pattern ฉันเดาว่าความแตกต่างนี้มีความสำคัญก็ต่อเมื่อคุณใช้ AJAX เพื่อโพสต์ข้อมูลของคุณและคุณกำลังใช้เหตุการณ์อื่นที่ไม่ใช่submitการกระตุ้นการโพสต์
— Zut
6
นี่ไม่ได้ทำในสิ่งที่ OP ถาม เฉพาะจำนวนเต็ม /\d*/.test(1.1) // true
— vsync
2
@vsync pattern="\d*"ไม่ได้เป็นเช่นเดียวกับ/\d*/, pattern="\d*"มีค่าเท่ากับ/^(?:\d*)$/โปรดดูที่HTML5 รูปแบบเอกสารแอตทริบิวต์
— Wiktor Stribiżew
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

ใช้รหัสนี้การป้อนข้อมูลในฟิลด์ข้อความ จำกัด ให้ป้อนเฉพาะตัวเลขเท่านั้น Pattern เป็นคุณสมบัติใหม่ที่มีใน HTML 5

แอตทริบิวต์เอกสารรูปแบบ

— thejustv
แหล่งที่มา
9
ตามข้อกำหนดแอตทริบิวต์รูปแบบสามารถนำมาใช้เฉพาะในกรณีที่ประเภทเข้าเป็นข้อความค้นหา URL, โทรศัพท์, อีเมล, รหัสผ่าน (ดังแสดงที่นี่ด้วย "ข้อความ" พิมพ์) ซึ่งหมายความว่าซีแมนทิกส์ของประเภทอินพุตตัวเลขดังนั้น (สำคัญ) แป้นตัวเลขบนหน้าจอของแท็บเล็ตและโทรศัพท์บางรุ่นจะหายไปเมื่อใช้วิธีนี้
— pwdst
3
ใน firefox 36.0 นี้ให้คุณพิมพ์ตัวอักษรและอักขระพิเศษ
— Malavos
1
ไม่ จำกัด เฉพาะการป้อนตัวเลขเท่านั้นคุณยังสามารถพิมพ์ตัวอักษรได้!
— HadidAli
35

วิธีง่ายๆในการใช้ JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
— Tarek Kalaji
แหล่งที่มา
ฉันไม่เข้าใจreplace(/(\..*)\./g, '$1')
— codyc4321
3
นี่เป็นสิ่งสำคัญที่จะยอมรับตัวเลขลอยและทำซ้ำ.เพียงครั้งเดียวเช่น123.556สามารถเขียนได้
— Tarek Kalaji
8
@TarekKalaji - คำถามระบุจำนวนเต็มไม่ใช่เลขทศนิยม
— vsync
โทรศัพท์มือถือเป็นอย่างไร เพราะพิมพ์ข้อความแสดงคีย์บอร์ดทั้งหมด (ตัวอักษรผสมตัวเลข)
— Nuri YILMAZ
27

รูปแบบเป็นสิ่งที่ดี แต่ถ้าคุณต้องการ จำกัด การป้อนข้อมูลเฉพาะตัวเลขที่มี type = "text" คุณสามารถใช้ oninput และ regex ดังนี้:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

ฉันขอให้ฉัน :)

— Viktor Karpyuk
แหล่งที่มา
โปรดระวังว่าวิธีการนี้อาจทำให้วิธีการ (เปลี่ยน) ของคุณ (ตัวจัดการเหตุการณ์) และลบค่าเริ่มต้นของคุณในกล่องอินพุต
— HadidAli
14

นี่ไม่ได้เป็นเพียง html5 เบราว์เซอร์ทั้งหมดทำงานได้ดี ลองนี้ 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
— Leopard
แหล่งที่มา
12
นี้ไม่ดี. ในการป้อนข้อมูลลอง: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V ใช้oninputแทน
— zanderwar
1
เมื่อเขียนคำตอบนี้ HTML5 จะไม่ถูกเผยแพร่ @zanderwar
— Muhammet Can TONBUL
11

รูปแบบมักจะดีกว่าสำหรับข้อ จำกัด ลองoninputและminเกิดขึ้น 1 สำหรับการป้อนตัวเลขเท่านั้นจาก 1 เป็นต้นไป

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
— Noothan yv
แหล่งที่มา
มันเป็นวิธีการแก้ปัญหามาก `value = $ {var}` คืออะไร?
— นักพัฒนา
@AcademyofProgrammer ตัวอย่างค่าเริ่มต้นสำหรับอินพุตนั้น
— Shinigamae
คำตอบที่ดีที่สุด! ใช้ได้กับการวางทำงานได้แม้ใน IE (10+) ให้อิสระแก่คุณในการแสดงแป้นพิมพ์ผ่านประเภทอินพุตและไม่ทำให้ Chrome แสดงลูกศรขึ้น / ลงที่น่ารำคาญเหล่านี้ในสนาม
— Janosch
4

เพียงวางไว้ในช่องใส่ของคุณ: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

— illeas
แหล่งที่มา
4

อาจจะไม่เหมาะกับทุกกรณีการใช้งาน แต่

<input type="range" min="0" max="10" />

สามารถทำผลงานได้ดี: ซอ

ตรวจสอบเอกสาร

— Luca Fagioli
แหล่งที่มา
3

ใช่ HTML5 ทำได้ ลองใช้รหัสนี้ ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

ดูขั้นต่ำและสูงสุด paremeter? ฉันลองใช้ Chrome 19 (ใช้งานได้) และ Firefox 12 (ไม่ทำงาน)

— wilsonfoz
แหล่งที่มา
นี่ถือว่าคุณต้องการช่วงที่รู้จัก แต่ถ้าคุณต้องการใด ๆค่าจำนวนเต็มจะยังคงทำงานอย่างไร
— RandomHandle
3

ฉันใช้งานได้ Chrome และมีปัญหาบางอย่างแม้ว่าฉันจะใช้คุณสมบัติ html ฉันลงเอยด้วยรหัส js นี้

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
— a.valchev
แหล่งที่มา
ฉันลงเอยด้วยการใช้สิ่งนี้ด้วยการปรับแต่งเล็กน้อย 1 ครั้ง; ฉันเปลี่ยน parseInt (ค่า) เป็น parseInt (value.replace ('.', '') สิ่งนี้อนุญาตให้ฉันวาง 1.56 และเก็บค่าที่แสดงที่ 156 แทน 1
— codescribblr
3

ตั้งค่าstepแอตทริบิวต์เป็นเลขลอยตัวใด ๆ เช่น 0.01 และคุณพร้อมที่จะไป

— Mantas K.
แหล่งที่มา
2

จากสเป็ค

step="any"หรือจำนวนจุดลอยตัวบวก
ระบุค่าความละเอียดของค่าขององค์ประกอบ

ดังนั้นคุณสามารถตั้งค่าเป็น1:

— เดวิดเฮดลันด์
แหล่งที่มา
9
ฉันได้ลองแล้ว แต่ปัญหาคือคุณยังสามารถพิมพ์เลขทศนิยมในกล่องข้อความได้
— JayPea
ดังนั้นคุณต้องการรหัสที่บล็อกผู้ใช้จากการพิมพ์จุดทศนิยม?
— Blazemonger
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
— Sarthak
แหล่งที่มา
0

ปัจจุบันไม่สามารถป้องกันผู้ใช้จากการเขียนค่าทศนิยมในอินพุตของคุณด้วย HTML เท่านั้น คุณต้องใช้จาวาสคริปต์

— คาล
แหล่งที่มา
-2

ใน Future ™ (ดูที่ฉันสามารถใช้งานได้ ) ในตัวแทนผู้ใช้ที่นำเสนอแป้นพิมพ์กับคุณคุณสามารถ จำกัด การป้อนข้อความให้เป็นตัวเลขinput[inputmode]ได้

— เวสตัน
แหล่งที่มา
inputmodeส่วนใหญ่จะใช้สำหรับอุปกรณ์พกพาและจะก่อให้เกิดรูปแบบแป้นพิมพ์ที่ถูกต้อง แต่สำหรับคอมพิวเตอร์ "ปกติ" ที่มีแป้นพิมพ์มันจะไม่ป้องกันการป้อนสิ่งที่คุณต้องการ
— vsync
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.