โทรศัพท์: แป้นพิมพ์ตัวเลขสำหรับการป้อนข้อความ

มีวิธีบังคับให้แป้นพิมพ์ตัวเลขปรากฏขึ้นบนโทรศัพท์<input type="text">หรือไม่? ฉันเพิ่งรู้ว่า<input type="number">ใน HTML5 นั้นใช้สำหรับ "หมายเลขจุดลอยตัว" ดังนั้นจึงไม่เหมาะสำหรับหมายเลขบัตรเครดิตรหัสไปรษณีย์ ฯลฯ

ฉันต้องการเลียนแบบการทำงานของแป้นพิมพ์ตัวเลข<input type="number">สำหรับอินพุตที่รับค่าตัวเลขอื่นที่ไม่ใช่ตัวเลขทศนิยม มีบางทีอีกinputประเภทที่เหมาะสมที่ทำเช่นนั้น?

<input type="text" pattern="\d*">คุณสามารถทำได้ นี่จะทำให้แป้นพิมพ์ตัวเลขปรากฏขึ้น

ดูรายละเอียดเพิ่มเติมที่นี่: คู่มือการเขียนข้อความเว็บและการแก้ไขสำหรับ iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

ตั้งแต่กลางปี ​​2558 ฉันเชื่อว่านี่เป็นทางออกที่ดีที่สุด:

<input type="number" pattern="[0-9]*" inputmode="numeric">

สิ่งนี้จะให้แป้นตัวเลขใน Android และ iOS:

นอกจากนี้ยังช่วยให้คุณมีพฤติกรรมบนเดสก์ท็อปที่คาดหวังด้วยปุ่มลูกศรขึ้น / ลงและแป้นพิมพ์ขึ้น / ลงแป้นลูกศรขึ้น:

ลองในตัวอย่างโค้ดนี้:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

โดยการรวมทั้งสองtype="number"และpattern="[0-9]*เราได้รับการแก้ปัญหาที่ใช้งานได้ทุกที่ และรองรับการใช้งานร่วมกับinputmodeแอตทริบิวต์HTML 5.1 ที่เสนอในอนาคต

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

หากคุณต้องการป้อนศูนย์นำหน้าเครื่องหมายจุลภาคหรือตัวอักษร - ตัวอย่างเช่นรหัสไปรษณีย์ระหว่างประเทศ - ตรวจสอบตัวแปรย่อยนี้

เครดิตและการอ่านเพิ่มเติม:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- ตัวเลขปุ่มกด /

ฉันได้พบว่าอย่างน้อยที่สุดสำหรับฟิลด์ "รหัสผ่าน" การทำสิ่งต่าง ๆ เช่น<input type="tel" />การสร้างฟิลด์หมายเลขที่ถูกต้องที่สุดและมันก็มีประโยชน์ในการไม่จัดรูปแบบอัตโนมัติ ตัวอย่างเช่นในแอพพลิเคชั่นมือถือที่ฉันพัฒนาขึ้นสำหรับฮิลตันเมื่อเร็ว ๆ นี้ฉันลงเอยด้วยการทำสิ่งนี้:

... และลูกค้าของฉันประทับใจมาก

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

การใช้type="email"หรือtype="url"จะให้แป้นพิมพ์บนโทรศัพท์บางรุ่นเป็นอย่างน้อยเช่น iPhone type="tel"สำหรับหมายเลขโทรศัพท์ที่คุณสามารถใช้

อาจเป็นอันตรายได้หากใช้ปุ่ม<input type="text" pattern="\d*">เพื่อเรียกแป้นตัวเลข บน firefox และ chrome นิพจน์ทั่วไปที่มีอยู่ภายในรูปแบบทำให้เบราว์เซอร์ตรวจสอบอินพุตกับนิพจน์นั้น ข้อผิดพลาดจะเกิดขึ้นหากไม่ตรงกับรูปแบบหรือเว้นว่างไว้ ระวังการกระทำที่ไม่ได้ตั้งใจในเบราว์เซอร์อื่น

<input type="text" inputmode="numeric">

ด้วยInputmodeคุณสามารถบอกใบ้ให้เบราว์เซอร์ทราบได้

ฉันคิดว่าtype="number"ดีที่สุดสำหรับหน้าเว็บแบบความหมาย ถ้าคุณเพียงต้องการที่จะเปลี่ยนแป้นพิมพ์คุณสามารถใช้หรือtype="number" type="tel"ในทั้งสองกรณี iPhone ไม่ได้ จำกัด การป้อนข้อมูลของผู้ใช้ ผู้ใช้ยังสามารถพิมพ์ (หรือวาง) อักขระที่ต้องการได้ การเปลี่ยนแปลงเพียงอย่างเดียวคือแป้นพิมพ์ที่แสดงต่อผู้ใช้ หากคุณต้องการข้อ จำกัด นอกเหนือจากนี้คุณต้องใช้ JavaScript

สำหรับฉันทางออกที่ดีที่สุดคือ:

สำหรับตัวเลขจำนวนเต็มซึ่งแสดงค่า 0-9 pad สำหรับ android และ iphone

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

คุณอาจต้องการทำเช่นนี้เพื่อซ่อนสปินเนอร์ใน firefox / chrome / safari ลูกค้าส่วนใหญ่คิดว่าพวกเขาดูน่าเกลียด

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

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

และเพิ่ม novalidate = 'novalidate' ให้กับองค์ประกอบแบบฟอร์มของคุณหากคุณกำลังทำการตรวจสอบความถูกต้องที่กำหนดเอง

ป.ล. ในกรณีที่คุณต้องการตัวเลขจุดลอยตัวจริง ๆ แล้วทำตามความแม่นยำที่คุณต้องการจะเพิ่ม '.' เพื่อ Android

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

ในปี 2561:

<input type="number" pattern="\d*">

ใช้งานได้ทั้ง Android และ iOS

ฉันทดสอบบน Android (^ 4.2) และ iOS (11.3)

คุณสามารถลองสิ่งนี้:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

แต่ระวัง: ถ้าข้อมูลของคุณมีบางอย่างที่ไม่ใช่ตัวเลขมันจะไม่ถูกส่งไปยังเซิร์ฟเวอร์

ฉันไม่พบประเภทที่ทำงานได้ดีที่สุดสำหรับฉันในทุกสถานการณ์: ฉันต้องใช้ค่าเริ่มต้นเป็นรายการตัวเลข (เช่นรายการ "7.5") แต่ในบางครั้งก็อนุญาตข้อความ (เช่น "pass") ผู้ใช้ต้องการแป้นพิมพ์ตัวเลข (เช่นรายการ 7.5) แต่จำเป็นต้องป้อนข้อความเป็นครั้งคราว (ตัวอย่างเช่น "pass")

สิ่งที่ฉันทำก็คือการเพิ่มช่องทำเครื่องหมายลงในแบบฟอร์มและอนุญาตให้ผู้ใช้สลับการป้อนข้อมูลของฉัน (id = "inputSresult") ระหว่าง type = "number" และ type = "text"

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

จากนั้นฉันวางสายตัวจัดการคลิกไปที่ช่องทำเครื่องหมายที่สลับประเภทระหว่างข้อความและหมายเลขตามว่ามีการทำเครื่องหมายในช่องด้านบนหรือไม่:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

มันทำงานได้ดีสำหรับเรา

 <input type="text" inputmode="decimal">

มันจะให้การป้อนข้อความของคุณโดยใช้แป้นตัวเลข

คุณสามารถใช้inputmodeแอตทริบิวต์ html:

<input type="text" inputmode="numeric" />

สำหรับรายละเอียดเพิ่มเติมตรวจสอบออกเอกสาร MDN ใน inputmode

ลองนี้:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

อ้างอิง: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask