ฉันมีเว็บไซต์บนมือถือและมีinputองค์ประกอบHTML อยู่ในนั้นดังนี้:
<input type="text" name="txtAccessoryCost" size="6" />
ฉันได้ฝังไซต์ลงในการWebViewใช้ Android 2.1 ที่เป็นไปได้เพื่อที่จะเป็นแอปพลิเคชัน Android
เป็นไปได้ไหมที่จะใช้แป้นพิมพ์ที่มีตัวเลขแทนที่จะเป็นแป้นพิมพ์เริ่มต้นที่มีตัวอักษรเมื่อinputองค์ประกอบHTML นี้เน้น
หรือเป็นไปได้ไหมที่จะตั้งค่าสำหรับแอปพลิเคชันทั้งหมด (อาจมีบางอย่างในไฟล์ Manifest ) หากองค์ประกอบ HTML ไม่สามารถทำได้
inputmode="number"แอตทริบิวต์ดูเหมือนว่าคำตอบที่ถูกต้องในช่วงปลายปี 2019: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/... คำตอบที่ได้รับการโหวตสูงสุดในช่วงเวลาของความคิดเห็นนี้แนะนำtype="number"ซึ่งมาพร้อมกับข้อผิดพลาดบางประการ inputmodeดูเหมือนว่าจะส่งผลต่อการแสดงแป้นพิมพ์เสมือนจริงเท่านั้นแทนที่จะเป็นพฤติกรรม / ข้อ จำกัด ของอินพุต
คำตอบ:
<input type="number" />
<input type="tel" />
ทั้งสองอย่างนี้แสดงแป้นพิมพ์ตัวเลขเมื่ออินพุตได้รับโฟกัส
<input type="search" />
แสดงแป้นพิมพ์ปกติพร้อมปุ่มค้นหาพิเศษ
ทุกอย่างดูเหมือนจะแสดงแป้นพิมพ์มาตรฐาน
type="tel"เป็นที่เลวร้ายtype="number"สำหรับตัวเลขการพิมพ์กว่าแป้นพิมพ์สำหรับ
โน๊ตสำคัญ
ฉันโพสต์สิ่งนี้เพื่อเป็นคำตอบไม่ใช่ความคิดเห็นเนื่องจากเป็นข้อมูลที่ค่อนข้างสำคัญและจะดึงดูดความสนใจมากขึ้นในรูปแบบนี้
ในขณะที่เพื่อนคนอื่นชี้คุณสามารถบังคับให้อุปกรณ์แสดงแป้นพิมพ์ตัวเลขด้วยtype="number"/ type="tel"แต่ฉันต้องย้ำว่าคุณต้องระมัดระวังอย่างยิ่งกับสิ่งนี้
หากมีคนคาดว่าตัวเลขที่ขึ้นต้นด้วยศูนย์เช่นแสดงว่า000222เธอมีปัญหาเนื่องจากเบราว์เซอร์บางตัว (เช่น Chrome บนเดสก์ท็อป) จะส่งไปยังเซิร์ฟเวอร์222ซึ่งไม่ใช่สิ่งที่เธอต้องการ
เกี่ยวกับtype="tel"ฉันไม่สามารถพูดอะไรที่คล้ายกันได้ แต่โดยส่วนตัวแล้วฉันไม่ได้ใช้มันเนื่องจากพฤติกรรมของโทรศัพท์ที่แตกต่างกันอาจแตกต่างกันไป ฉัน จำกัด ตัวเองให้อยู่กับสิ่งง่ายๆpattern="[0-9]*"ที่ใช้ไม่ได้ใน Android
type="tel". ข้อมูลจำเพาะหมายเหตุที่telไม่บังคับไวยากรณ์ใด ๆ ซึ่งแตกต่างจากnumberที่กำหนดให้ค่าของมันจะเป็นเลขทศนิยมที่ถูกต้อง
สิ่งนี้ควรใช้งานได้ แต่ฉันมีปัญหาเดียวกันกับโทรศัพท์ Android
<input type="number" /> <input type="tel" />
ฉันพบว่าถ้าฉันไม่รวม jquerymobile-framework ปุ่มกดจะแสดงอย่างถูกต้องบนฟิลด์สองประเภท
แต่ฉันไม่พบวิธีแก้ปัญหานั้นหากคุณจำเป็นต้องใช้ jquerymobile จริงๆ
UPDATE: ฉันพบว่าหากจัดเก็บ form-tag จากไฟล์
<div data-role="page">
ปุ่มกดตัวเลขไม่แสดง นี่ต้องเป็นบั๊ก ...
inputmodeตามข้อกำหนด WHATWGเป็นวิธีการเริ่มต้น
สำหรับอุปกรณ์ iOS การเพิ่มpatternอาจช่วยได้
สำหรับความเข้ากันได้แบบย้อนหลังก็ใช้typeเช่นกันเนื่องจาก Chrome ใช้สิ่งเหล่านี้ในเวอร์ชัน 66
<input
inputmode="numeric"
pattern="[0-9]*"
type="number"
/>
decimalและพบที่นี่developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
เบราว์เซอร์บางตัวจะส่งค่าศูนย์นำหน้าไปยังเซิร์ฟเวอร์เมื่อประเภทอินพุตเป็น "number" ดังนั้นฉันจึงใช้ jquery และ html ผสมกันเพื่อโหลดแป้นพิมพ์ตัวเลขและตรวจสอบให้แน่ใจว่าค่าถูกส่งเป็นข้อความไม่ใช่ตัวเลข:
$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">type="digits"ตัวเลือกเพื่อที่เราจะได้ไม่ต้องมีแฮ็กเหล่านี้ ฉันหมายความว่ามันไม่เหมือนกับเลขศูนย์นำหน้านั้นหายาก (รหัสไปรษณีย์ในสหรัฐอเมริกาเป็นตัวอย่างที่ชัดเจน)
input type = number
เมื่อคุณต้องการป้อนตัวเลขคุณสามารถใช้ค่าแอตทริบิวต์ HTML5 input type = "number"
<input type="number" name="n" />
นี่คือคีย์บอร์ดที่มาพร้อมกับ iPhone 4:
ภาพหน้าจอ iPhone ของประเภทอินพุต HTML5 Android 2.2 ใช้แป้นพิมพ์นี้สำหรับ type = number:
ภาพหน้าจอ Android ของหมายเลขประเภทอินพุต HTML5
เพิ่มแอตทริบิวต์ขั้นตอนในการป้อนตัวเลข
<input type="number" step="0.01">
ที่มา: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html