एंड्रॉइड में मोबाइल वेबसाइट में नंबर के साथ कीबोर्ड को कैसे मजबूर किया जाए

91

मेरे पास एक मोबाइल वेबसाइट है और इसमें कुछ HTML inputतत्व हैं, जैसे:

<input type="text" name="txtAccessoryCost" size="6" />

मैंने साइट को WebViewसंभावित एंड्रॉइड 2.1 खपत के लिए एम्बेड किया है , ताकि यह एक एंड्रॉइड एप्लिकेशन भी हो।

क्या यह HTML inputतत्व केंद्रित होने पर अक्षरों के साथ डिफ़ॉल्ट के बजाय कीबोर्ड के साथ संख्याओं को प्राप्त करना संभव है?

या, क्या इसे पूरे एप्लिकेशन (शायद मैनिफ़ेस्ट फ़ाइल में कुछ ) के लिए सेट करना संभव है , अगर यह HTML तत्व के लिए संभव नहीं है?

— ncakmak
स्रोत

अगर एंड्रॉइड के अलावा iOS पर एक संख्यात्मक कीपैड चाहिए, तो आपको यह करना चाहिए: stackoverflow.com/a/31619311/806956

— हारून ग्रे

2

यह inputmode="number"विशेषता 2019 के अंत में सही उत्तर की तरह लगती है: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… । इस टिप्पणी के समय सबसे अधिक वोट दिए गए उत्तर का सुझाव है type="number", जो अपने स्वयं के कुछ नुकसान के साथ आता है; inputmodeकेवल इनपुट के व्यवहार / बाधाओं के बजाय वर्चुअल कीबोर्ड डिस्प्ले को प्रभावित करता है।

— शेफडॉइनवेर्क

112

<input type="number" />
<input type="tel" />

इनपुट लाभ फ़ोकस होने पर ये दोनों संख्यात्मक कीपैड प्रस्तुत करते हैं।

<input type="search" /> एक अतिरिक्त खोज बटन के साथ एक सामान्य कीबोर्ड दिखाता है

बाकी सब कुछ मानक कीबोर्ड को लाने के लिए लगता है।

— रिचर्ड कर्नाहन
स्रोत

आज इस पर एक नज़र डालेंगे, और फिर आपको बताएंगे कि क्या यह काम करेगा। धन्यवाद, रिचर्ड!

— ncakmak

1

हाय रिचर्ड। कोई भी काम नहीं किया, इनपुट फ़ील्ड अभी भी मानक कीबोर्ड खोल रहा है।

— ncakmak 13

1

के HTML विनिर्देश की सूची input typeरों सहित, numberऔर tel।

— रोरी ओ'केन

1

ध्यान दें कि कीबोर्ड के लिएtype="tel" नंबर टाइप करने के लिए कीबोर्ड बदतर है type="number"।

— रोरी ओ'केन

2

<input type="text" pattern="\d*" /> संख्यात्मक कीबोर्ड भी लाता है , लेकिन केवल iOS पर, एंड्रॉइड पर नहीं ।

— रोरी ओ'केन

50

महत्वपूर्ण लेख

मैं इसे एक उत्तर के रूप में पोस्ट कर रहा हूं, एक टिप्पणी के रूप में नहीं, क्योंकि यह महत्वपूर्ण जानकारी है और यह इस प्रारूप में अधिक ध्यान आकर्षित करेगा।

जैसा कि अन्य साथियों ने बताया है, आप किसी डिवाइस को आपको type="number"/ के साथ एक संख्यात्मक कीबोर्ड दिखाने के लिए मजबूर कर सकते हैं type="tel", लेकिन मुझे इस बात पर जोर देना चाहिए कि आपको इसके साथ बेहद सतर्क रहना होगा।

अगर किसी को शून्य से शुरू होने वाली संख्या की उम्मीद है, जैसे कि 000222, तो उसे परेशानी होने की संभावना है, क्योंकि कुछ ब्राउज़र (उदाहरण के लिए डेस्कटॉप क्रोम) सर्वर पर भेज देंगे 222, जो वह नहीं चाहता है।

के बारे में type="tel"मैं ऐसा ही कुछ नहीं कह सकता, लेकिन व्यक्तिगत रूप से मैं इसका उपयोग नहीं करता, क्योंकि विभिन्न टेलीफोन पर इसका व्यवहार अलग-अलग हो सकता है। मैंने खुद को सिंपल रखा है pattern="[0-9]*"जो एंड्रॉइड में काम नहीं करता है

— user907860
स्रोत

4

स्वत: सुधार शायद साथ नहीं होता है type="tel"। कल्पना नोट जो telकिसी विशेष वाक्यविन्यास को लागू नहीं करता है, इसके विपरीत number, जिसके लिए आवश्यक है कि इसका मान एक मान्य फ्लोटिंग-पॉइंट संख्या हो ।

— रोरी ओ'केन

यह कितना बुरा है? हम अपने मोबाइल ग्राहकों के लिए फ़ॉर्म प्रक्रिया को तेज़ करने की कोशिश कर रहे हैं और यह एक स्पष्ट समाधान की तरह लगता है, लेकिन हम कुछ विश्वसनीय भी चाहते हैं। आपने इस पद्धति का उपयोग करने के खिलाफ एक सख्त चेतावनी पोस्ट की है। मुझे आश्चर्य है कि अगर आप उस पर थोड़ा और विस्तार कर सकते हैं?

— Philll_t

@Philll_t, एक उपयोगकर्ता को '000222' डेटा भेजने की आवश्यकता है, लेकिन आपको सर्वर की ओर '222' के बजाय मिलता है। क्या आपको नहीं लगता कि कार्यक्षमता पूरी तरह से टूट गई है? सर्वर में गलत डेटा मिलता है।

— user907860

हां, मैं देख रहा हूं कि आपका क्या मतलब है, लेकिन मैं जो कह रहा हूं वह यह है: कितने प्रतिशत उपयोगकर्ता इसे देखते हैं? क्या यह सफारी और क्रोम जैसे प्रमुख मोबाइल ब्राउज़रों पर एक समस्या है? आप कैसे जानते हैं कि यह एक समस्या है, क्या कोई लिंक है जो आप प्रदान कर सकते हैं। मेरा मानना है कि, मैं सिर्फ खुद पर शोध करना चाहता हूं और ऐसा कुछ भी सुझाव देने के लिए नहीं देखा है, हो सकता है कि आप मुझे सही दिशा दे सकें। हम केवल यह देखने की कोशिश कर रहे हैं कि क्या हमारे ग्राहक आधार को इससे लाभ नहीं होगा।

— Philll_t

1

@Philll_t मुझे लगता है कि इस चेतावनी के लिए सबसे अच्छा उदाहरण जन्म तिथि क्षेत्रों के लिए है। जहां आपको दिन, महीने और वर्ष को मैन्युअल रूप से इनपुट करना होगा। और हाँ, अभी भी बहुत सारी वेबसाइटें इस शैली का उपयोग करती हैं बजाय आमतौर पर इस्तेमाल किए जाने वाले डेट पिकर की। जन्मतिथि इनपुट फ़ील्ड्स की समस्या के बारे में, जब आप अपना दिन या महीना "0" से शुरू करते हैं, उदाहरण 08।

— रॉबिन कार्लो कैटाकुटन

8

यह काम करना चाहिए। लेकिन मुझे एंड्रॉइड फोन पर समान समस्याएं हैं।

<input type="number" /> <input type="tel" />

मुझे पता चला, कि अगर मैंने jquerymobile- फ्रेमवर्क को शामिल नहीं किया, तो कीपैड दो प्रकार के क्षेत्रों पर सही ढंग से दिखाया गया।

लेकिन मुझे उस समस्या को हल करने के लिए एक समाधान नहीं मिला, अगर आपको वास्तव में jquerymobile का उपयोग करने की आवश्यकता है।

अद्यतन: मुझे पता चला है, कि यदि प्रपत्र-टैग को संग्रहीत किया गया है

<div data-role="page">

नंबर कीपैड नहीं दिखाया गया है। यह एक बग होना चाहिए ...

— जेसपर ग्रेन लॉरेन
स्रोत

इसमें खुदाई के लिए धन्यवाद। मुझे यकीन नहीं है कि मैं समझ रहा हूँ: "अगर फॉर्म-टैग div [डेटा-भूमिका = पृष्ठ] से बाहर संग्रहीत है।" मेरे मामले में समस्या उन रूपों के साथ होती है जो एक div [डेटा-भूमिका = पृष्ठ] के अंदर अच्छी तरह से निहित हैं। शायद समस्या यह है कि ये पृष्ठ मेरे मामले में, संवाद के रूप में प्रदर्शित हो रहे हैं?

— 12 बज गए

6

inputmodeWHATWG कल्पना के अनुसार डिफ़ॉल्ट विधि है।

IOS उपकरणों को जोड़ने से patternभी मदद मिल सकती है।

बैकवर्ड कम्पैटिबिलिटी के लिए और typeसाथ ही क्रोम का उपयोग वर्जन 66 के रूप में करते हैं।

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

— रेजा घोरबानी
स्रोत

उत्तर के लिए धन्यवाद, मैं देख रहा था decimalऔर इसे यहां पाया। developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— Rami Alloush

2

इनपुट के प्रकार "संख्या" होने पर कुछ ब्राउज़र सर्वर पर अग्रणी शून्य भेजते हैं। इसलिए मैं एक संख्यात्मक कीपैड को लोड करने के लिए 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">

स्निपेट का विस्तार करें

— अली शेखपुर
स्रोत

3

यह Android के लिए Chrome पर एक कष्टप्रद समस्या का कारण बनता है। जब आप इनपुट पर टैप करते हैं, तो कीबोर्ड ऊपर नहीं आता है। फिर आपको दूसरी बार टेक्स्टबॉक्स पर टैप करना होगा और फिर कीबोर्ड नंबर-ही कीबोर्ड के साथ आएगा। मैं वास्तव में चाहता हूं कि हमारे पास एक type="digits"विकल्प था ताकि हमारे पास ये हैक न हों। मेरा मतलब है, यह एक शून्य-अग्रणी संख्या की तरह नहीं है यह दुर्लभ है (यूएस में ज़िप कोड एक स्पष्ट उदाहरण है)।

— जैसिडियन

2

मैं भी इसी समस्या का सामना करता हूँ! फ़ील्ड को "टाइप = टेल" पर सेट करना सबसे अच्छा समाधान है।

— अली शेखपुर

-2

input type = number

जब आप एक नंबर इनपुट प्रदान करना चाहते हैं, तो आप HTML5 इनपुट प्रकार = "नंबर" विशेषता मान का उपयोग कर सकते हैं।

<input type="number" name="n" />

यहाँ कीबोर्ड है जो iPhone 4 पर आता है:

एचटीएमएल 5 इनपुट टाइप नंबर एंड्रॉइड 2.2 का आईफोन स्क्रीनशॉट टाइप = नंबर के लिए इस कीबोर्ड का उपयोग करता है:

HTML5 इनपुट प्रकार की संख्या का Android स्क्रीनशॉट

— अविनाश पंडित
स्रोत

-2

नंबर इनपुट में एक चरण विशेषता जोड़ें

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

स्रोत: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html.com.html

— Jogai
स्रोत