ฉันสามารถซ่อนกล่องสปินของการป้อนหมายเลข HTML5 ได้หรือไม่?

984

มีวิธีที่สอดคล้องกันในทุกเบราว์เซอร์เพื่อซ่อนสปินบ็อกซ์ใหม่ที่บางเบราว์เซอร์ (เช่น Chrome) แสดงผลสำหรับการป้อน HTML ของหมายเลขประเภท? ฉันกำลังมองหาวิธี CSS หรือ JavaScript เพื่อป้องกันไม่ให้ลูกศรขึ้น / ลงปรากฏ

<input id="test" type="number">
javascript  css  html  input  numbers 
— อลัน
แหล่งที่มา
2
คุณสามารถโพสต์ตัวอย่างของรหัสที่คุณใช้อยู่ได้หรือไม่? ภาพหน้าจอจะยอดเยี่ยมเช่นกันดังนั้นเราจึงรู้ว่าคุณกำลังดูอะไรอยู่ ฉันกำลังดู<input type="number" min="4" max="8" />ใน Chrome และเห็นช่องป้อนข้อมูลทั่วไปที่มีลูกศรขึ้นและลงที่ด้านข้าง
— calvinf
77
คุณกำลังเห็นสิ่งที่ฉันเห็น ฉันพยายามรักษามาร์กอัป type = number เพื่อให้แน่ใจว่าเบราว์เซอร์มือถือแสดงแป้นพิมพ์ที่เหมาะสมและป้องกันไม่ให้ลูกศรขึ้นและลงปรากฏในเบราว์เซอร์คอมพิวเตอร์
— อลัน
3
หากคุณใช้การป้อนตัวเลขให้แน่ใจว่าได้ใช้สิ่งที่เล่นได้ดีกับเบราว์เซอร์ iOS, Android และ Desktop ที่<input type="number" pattern="[0-9]*" inputmode="numeric">ทันสมัย: ข้อมูลเพิ่มเติม: stackoverflow.com/a/31619311/806956
— Aaron Grey
1
สิ่งที่ฉันแนะนำให้ทำคือการเขียนมาร์กอัพตามบรรทัด<input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > และใช้jQuery Validatiหรือคล้ายกันเพื่อจัดการการตรวจสอบ ฉันยังไม่ได้ทดสอบวิธีการนี้ซึ่งเป็นเหตุผลว่าทำไมนี่เป็นความคิดเห็นมากกว่าคำตอบ
— Agi Hammerthief

คำตอบ:

1141

CSS นี้ซ่อนปุ่มหมุนได้อย่างมีประสิทธิภาพสำหรับเว็บเบราว์เซอร์ (ทดสอบใน Chrome 7.0.517.44 และ Safari เวอร์ชัน 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />
ขยายตัวอย่างข้อมูล

คุณสามารถใช้ตัวตรวจสอบ (webkit หรือ Firebug สำหรับ Firefox) เพื่อค้นหาคุณสมบัติ CSS ที่ตรงกับองค์ประกอบที่คุณสนใจมองหาองค์ประกอบ Pseudo ภาพนี้แสดงผลลัพธ์สำหรับองค์ประกอบอินพุตชนิด = "number":

ตัวตรวจสอบสำหรับประเภทอินพุต = หมายเลข (Chrome)

— antonj
แหล่งที่มา
23
ดูเหมือนว่า Chrome จะไม่มีปัญหาอีกต่อไปดังนั้นคุณสามารถใช้ display: none;เป็นเพียงสิ่งเดียวในตัวเลือก
— philfreo
9
น่าเสียดายที่ไม่ใช่เบราว์เซอร์ข้ามดังนั้นเราขอแนะนำให้type=numberคุณใช้หากคุณต้องซ่อนลูกศรเหล่านี้ เช่นปัจจุบันพวกเขาจะยังคงแสดงใน Opera และพวกเขาจะเริ่มแสดงใน Firefox, IE และอื่น ๆ เมื่อใช้ประเภทอินพุตนี้
— mgol
ฉันต้องใช้max=และmin=คุณลักษณะใน<input>การแก้ปัญหาอื่นเช่นtype="text"HTML5 ที่ไม่ถูกต้อง ผู้คนยังพูดถึง Opera รวมถึงสปินเนอร์เหล่านี้ด้วย มีวิธีแก้ปัญหาสำหรับ Opera คล้ายกับ Safari / Chrome หรือไม่?
— ถอด
2
สำหรับบันทึกแล้ว Chrome ยังมีinput::-webkit-clear-buttonปุ่ม X
— aldo.roman.nurena
2
ตั้งแต่ปี 2019 สิ่งนี้ไม่ได้ผลสำหรับฉันใน Firefox วิธีนี้ใช้ได้ผลกับฉัน: stackoverflow.com/questions/45396280/…
— lwitzel
431

Firefox 29 ในปัจจุบันเพิ่มการรองรับองค์ประกอบตัวเลขดังนั้นนี่เป็นตัวอย่างข้อมูลสำหรับการซ่อนสปินเนอร์ในเบราว์เซอร์ที่ใช้ webkit และ moz:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">
ขยายตัวอย่างข้อมูล

— swehren
แหล่งที่มา
บวกกับ 'margin: 0' จากคำตอบของ antonj คือสิ่งที่ฉันใช้
— Asfand Qazi
ฉันใช้มันโดยไม่มีระยะขอบและดูเหมือนว่าจะใช้ได้ (พฤษภาคม 2020)
— croraf
359

คำตอบสั้น ๆ :

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
<input type="number" />
ขยายตัวอย่างข้อมูล

คำตอบอีกต่อไป:

เพื่อเพิ่มคำตอบที่มีอยู่ ...

Firefox:

ในรุ่นปัจจุบันของ Firefox ที่ (ตัวแทนผู้ใช้) ค่าเริ่มต้นของ-moz-appearanceสถานที่ให้บริการnumber-inputในองค์ประกอบเหล่านี้คือ การเปลี่ยนสิ่งนั้นให้เป็นค่าtextfieldจะช่วยให้เครื่องปั่นหมุน

input[type="number"] {
    -moz-appearance: textfield;
}

ในบางกรณีคุณอาจต้องการซ่อนสปินเนอร์ในตอนแรกจากนั้นปรากฏบนโฮเวอร์ / โฟกัส (ปัจจุบันเป็นพฤติกรรมเริ่มต้นใน Chrome) หากเป็นเช่นนั้นคุณสามารถใช้สิ่งต่อไปนี้:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>
ขยายตัวอย่างข้อมูล

โครเมียม:

ในรุ่นปัจจุบันของ Chrome ที่ (ตัวแทนผู้ใช้) ค่าเริ่มต้นของ-webkit-appearanceสถานที่ให้บริการtextfieldเกี่ยวกับองค์ประกอบเหล่านี้อยู่แล้ว เพื่อที่จะลบสปินเนอร์-webkit-appearanceค่าของคุณสมบัติต้องเปลี่ยนเป็นnoneในคลาส::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonpseudo ( -webkit-appearance: inner-spin-buttonโดยค่าเริ่มต้น)

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
<input type="number" />
ขยายตัวอย่างข้อมูล

เป็นการชี้ให้เห็นว่าควรmargin: 0ใช้เพื่อลบระยะขอบในChrome รุ่นเก่ากว่า

ในขณะที่เขียนสิ่งนี้นี่คือรูปแบบตัวแทนผู้ใช้เริ่มต้นในคลาสหลอก 'ภายในปุ่มหมุน':

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}
— Josh Crozier
แหล่งที่มา
14
ฉันชอบคำตอบนี้ดีกว่าเพราะมีข้อมูล firefox ที่เกี่ยวข้องซึ่งเมื่อต้องพัฒนาบางสิ่งจำเป็นต้องได้รับการพิจารณา คำตอบสำหรับเว็บคิตเดียวที่ไม่สนใจเครื่องมือเบราว์เซอร์อื่น ๆ เป็นที่ต้องการมาก
— RozzA
เพิ่ม! important to firefox solution เช่นนี้ ===> input [type = "number"] {-moz-Appearance: textfield! important; }
— sajad saderi
126

ตามคู่มือการเข้ารหัสประสบการณ์ผู้ใช้ของ Apple สำหรับมือถือ Safariคุณสามารถใช้สิ่งต่อไปนี้เพื่อแสดงแป้นพิมพ์ตัวเลขในเบราว์เซอร์ iPhone:

<input type="text" pattern="[0-9]*" />

patternของ\d*จะทำงาน

— team_steve
แหล่งที่มา
5
แม้จะมีวิธีข้างต้นวิธีการตรวจสอบที่ใช้งานได้ดีสำหรับปัญหาที่ระบุฉันตัดสินใจเปลี่ยนเป็นโซลูชันนี้ที่นี่ เหตุผลหนึ่งก็คือเช่นเบราว์เซอร์ Opera ยังแสดงลูกศรซึ่งคุณควรป้องกันด้วย ประการที่สองฉันสังเกตเห็นปัญหาที่ใหญ่กว่าใน Chrome 17 ที่หนึ่งคุณลักษณะ 'maxlen' ดูเหมือนจะไม่ทำงานอีกต่อไป คุณสามารถป้อนอักขระได้มากเท่าที่คุณต้องการ ในทางกลับกันตัวเลขที่เกินความยาวที่แน่นอนจะถูกปัดเศษ การใช้โซลูชันนี้สำหรับ "เพียงแค่เปิด numpad บนอุปกรณ์ iOS" ดูเหมือนจะปลอดภัยกว่าสำหรับฉัน
— Jan
ฉันใช้โซลูชันนี้เช่นกันเนื่องจากฉันมี JS บางตัวที่สร้างตัวเลขในอินพุตฟิลด์เมื่อฉันพิมพ์และนั่นไม่ได้ทำงานกับฟิลด์ตัวเลข ดังนั้นอันนี้ทำงานเหมือนมีเสน่ห์
— Tokimon
19
ปัจจุบันนี้ไม่ได้ทำอะไรบน Android ในเบราว์เซอร์ทั้งหมด ทดสอบในหน้าทดสอบนี้ในเบราว์เซอร์ 4.2.2, Chrome 28 และ Firefox 23 บน Android 4.2 เบราว์เซอร์เหล่านั้นเพียงแสดงแป้นพิมพ์ข้อความมาตรฐานด้วยมาร์กอัปนี้
— Rory O'Kane
3
นี่เป็นวิธีแก้ปัญหาที่ดีสำหรับทั้ง Android และ iOS: stackoverflow.com/a/31619311/806956
— Aaron Grey
1
@AaronGray กลับไปที่ตารางหนึ่งแม้ว่า: วิธีการแก้ปัญหาที่มีเหยื่อสำหรับเดสก์ท็อป
— StrangeWill
39

ลองใช้input type="tel"แทน มันปรากฏขึ้นแป้นพิมพ์ที่มีตัวเลขและจะไม่แสดงกล่องหมุน มันไม่จำเป็นต้องมี JavaScript หรือ CSS หรือปลั๊กอินหรือสิ่งอื่นใด

— MERT DOĞAN
แหล่งที่มา
17
การแก้ปัญหานี้ไม่ได้กำลังทำการตรวจสอบใด ๆ ในเบราว์เซอร์ใด ๆ เช่นtype=numberไม่
— Pepijn
5
แป้นพิมพ์โทรศัพท์ไม่ดีเท่าแป้นตัวเลขแม้ว่ามันจะดีกว่าแป้นพิมพ์ข้อความก็ตาม แป้นพิมพ์โทรศัพท์มีตัวอักษรและสัญลักษณ์ที่ไม่เกี่ยวข้องซึ่งตัดออกจากแป้นพิมพ์ตัวเลข (ทดสอบกับหน้านี้ใน Android 4.2.)
— Rory O'Kane
16
ไม่มี "." ในคีย์บอร์ดโทร: - <
— gion_13
1
@ RoryO'Kane แป้นพิมพ์ตัวเลขมีข้อเสียอย่างใหญ่หลวงจริง ๆ ว่าจะปฏิเสธการป้อนข้อมูลใด ๆ ที่ไม่ใช่ตัวเลขอย่างเคร่งครัด
— Jochem Kuijpers
4
นี่ไม่ใช่วิธีแก้ปัญหาและตามมาตรฐาน HTML5 ที่โง่เง่า อินพุต [tel] ใช้สำหรับหมายเลขโทรศัพท์อินพุต [หมายเลข] ใช้สำหรับหมายเลขทั่วไปรวมถึงเลขทศนิยม ดังนั้นนี่ไม่ใช่วิธีแก้ปัญหาเลย
— Vasil Popov
17

เพิ่มเฉพาะ CSS นี้เพื่อลบสปินเนอร์เมื่อป้อนจำนวน

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
— Sanjib Debnath
แหล่งที่มา
ตาม caniuse input[type=number]{ -webkit-appearance }ควรเพียงพอสำหรับโครเมี่ยม แต่แน่นอนคุณต้องปรับเปลี่ยนองค์ประกอบหลอก คิดอะไรทำไม?
— oldboy
8

ฉันพบปัญหานี้กับ a input[type="datetime-local"]ซึ่งคล้ายกับปัญหานี้

และฉันก็พบวิธีที่จะเอาชนะปัญหาแบบนี้

ก่อนอื่นคุณต้องเปิดใช้คุณลักษณะเงารูตของ Chrome โดย "DevTools -> การตั้งค่า -> ทั่วไป -> องค์ประกอบ -> แสดงเงาตัวแทนผู้ใช้"

จากนั้นคุณสามารถดูองค์ประกอบ DOMทั้งหมดในเงาตัวอย่างเช่น<input type="number">องค์ประกอบแบบเต็มที่มีเงาใน DOM คือ:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>
ขยายตัวอย่างข้อมูล

DOM เงาของอินพุต [type = "number"

และจากข้อมูลเหล่านี้คุณสามารถร่าง CSS เพื่อซ่อนองค์ประกอบที่ไม่ต้องการเช่นเดียวกับ @Josh กล่าว

— เซียวฮันหยู
แหล่งที่มา
3

ไม่ใช่สิ่งที่คุณขอ แต่ฉันทำเช่นนี้เพราะจุดบกพร่องโฟกัสใน WebKit ด้วย spinboxes:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

มันอาจทำให้คุณมีความคิดที่จะช่วยเหลือในสิ่งที่คุณต้องการ

— Gaurav
แหล่งที่มา
นี่ไม่ใช่สิ่งที่ฉันกำลังพูดถึง แต่เนื่องจากขาดมาตรฐาน HTML5 ในปัจจุบันจึงเป็นทางออกที่ดีที่สุดที่นำเสนอ การจัดเตรียมไซต์สำหรับมือถือที่แตกต่างจากบนเดสก์ท็อป (ไม่ว่าจะนำไปใช้อย่างไร) ดูเหมือนเป็นวิธีเดียวที่จะทำให้สำเร็จในปัจจุบัน อย่างไรก็ตามฉันต้องสร้างสำเนาขององค์ประกอบและเปลี่ยนค่า 'ชนิด' ก่อนที่จะเพิ่มลงใน DOM เนื่องจาก IE ไม่อนุญาตให้แก้ไขชนิดของอินพุตเมื่อองค์ประกอบถูกเพิ่มเข้ากับ dom
— อลัน
3

นี่เป็นคำตอบที่ดีกว่าฉันอยากจะแนะนำให้ใช้เม้าส์

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }
— Swap-IOS-Android
แหล่งที่มา
สิ่งที่ไม่margin: 0สำเร็จ? นอกจากนี้spin-buttonองค์ประกอบหลอกไม่ดูเหมือนจะถูกเรียกโดยhoverเบราว์เซอร์รุ่นใหม่?
— oldboy
2

เพื่อให้การทำงานนี้ใน Safari ฉันพบว่าการเพิ่ม! สิ่งสำคัญสำหรับการปรับปรุง webkit บังคับให้ปุ่มหมุนถูกซ่อนอยู่

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

ฉันยังคงมีปัญหาในการหาทางออกสำหรับ Opera เช่นกัน

— luckychii
แหล่งที่มา
2

บน Firefox สำหรับ Ubuntu เพียงใช้

    input[type='number'] {
    -moz-appearance:textfield;
}

ทำเคล็ดลับสำหรับฉัน

เพิ่ม

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

จะพาฉันไป

pseudo-class หรือ pseudo-element ที่ไม่รู้จัก '-webkit-outer-spin-button' กฎถูกละเว้นเนื่องจากตัวเลือกไม่ถูกต้อง

ทุกครั้งที่ฉันพยายาม เช่นเดียวกันกับปุ่มหมุนด้านใน

— sonny_boy
แหล่งที่มา
1
-webkit-*สำหรับ Chrome ใช้-moz-*สำหรับ mozilla firefox นั่นเป็นเหตุผลที่มันไม่ทำงานสำหรับคุณ
— Gusstavv Gil
2 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">
ขยายตัวอย่างข้อมูล

— เจ้าชายชาร์
แหล่งที่มา
6
คำตอบนี้ได้รับหลายครั้งแล้ว ช่วยในการอ่านคำตอบที่มีอยู่ก่อนที่จะให้คำตอบใหม่ในกรณีที่คำตอบใหม่นั้นซ้ำกัน
— Dan Dascalescu
1

อาจเปลี่ยนตัวเลขด้วย javascript เป็นข้อความเมื่อคุณไม่ต้องการเครื่องปั่นด้าย

document.getElementById('myinput').type = 'text';

และหยุดผู้ใช้ป้อนข้อความ

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

จากนั้นให้เปลี่ยนจาวาสคริปต์กลับมาในกรณีที่คุณต้องการเครื่องปั่นด้าย

document.getElementById('myinput').type = 'number';

มันทำงานได้ดีสำหรับวัตถุประสงค์ของฉัน

— user3121518
แหล่งที่มา
1

ในเบราว์เซอร์ที่ใช้ WebKit และ Blink และเบราว์เซอร์ทุกชนิดใช้ CSS ต่อไปนี้:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
— Sabbir Hossen Chowdhury
แหล่งที่มา
เบราว์เซอร์ในงานนี้จะได้รับการใช้งานwebkit? เมื่อตอบคำถามอายุเก้าขวบที่มีคำตอบอยู่สิบสี่ข้อเป็นสิ่งสำคัญที่จะต้องเพิ่มคำอธิบายว่าทำไมคำตอบของคุณจึงใช้ได้และต้องพูดถึงแง่มุมใหม่ของคำถามที่ตอบ
— Jason Aller
0

ฉันต้องการสิ่งนี้ในการทำงาน

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

บรรทัดเพิ่มเติมของappearance: noneเป็นกุญแจสำคัญสำหรับฉัน

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