फोन: पाठ इनपुट के लिए संख्यात्मक कीबोर्ड

Question

क्या फोन पर आने के लिए नंबर कीबोर्ड को मजबूर करने का कोई तरीका है <input type="text">? मुझे बस एहसास हुआ कि <input type="number">एचटीएमएल 5 “फ्लोटिंग-पॉइंट नंबरों” के लिए है, इसलिए यह क्रेडिट कार्ड नंबर, ज़िप कोड आदि के लिए उपयुक्त नहीं है।

<input type="number">फ्लोटिंग-पॉइंट नंबरों के अलावा अन्य न्यूमेरिकल वैल्यू लेने वाले इनपुट के लिए मैं न्यूमेरिक-कीबोर्ड फंक्शनलिटी का अनुकरण करना चाहता हूं । क्या, शायद, एक और उपयुक्त inputप्रकार है जो ऐसा करता है?

Comments

अभी भी पोस्टल कोड के लिए एक महान जवाब नहीं है। मैंने इस प्रश्न को विशेष रूप से अंतर्राष्ट्रीय डाक कोड के लिए यहां फिर से पूछा: stackoverflow.com/questions/25425181/…

— रायन मैक्ग्रे

मैंने ऐसा करने के लिए एक हैक करने का तरीका निकाला। ..ort of: stackoverflow.com/a/25599024/1922144

— davidcondrey

2015 के मध्य तक, ऐसा करने का एक बेहतर तरीका है: stackoverflow.com/a/31619311/806956

— हारून ग्रे

Answer 1

आप कर सकते हैं <input type="text" pattern="\d*">। इससे संख्यात्मक कीबोर्ड दिखाई देगा।

अधिक विवरण के लिए यहां देखें: पाठ, वेब, और iOS के लिए एडिटिंग प्रोग्रामिंग गाइड

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

Comments

यदि आप केवल संख्यात्मक कीबोर्ड चाहते हैं, लेकिन (जैसे क्रोम में) को मान्य नहीं करना चाहते हैं, तो आप प्रपत्र पर नोवेलिड विशेषता डाल सकते हैं। <form ... novalidate>

— ब्रायन

मैंने पाया है कि \d*काम नहीं करता है और [0-9]इसकी आवश्यकता है। ध्यान दें कि यह साथ काम करेगा type='numeric'। यह ज़िप कोड के लिए लिंक किए गए दस्तावेज़ संदर्भ के आधार पर सुझाया गया है।

— ब्रेट रायन

यह तब तक काम करता है जब तक आपको केवल संख्यात्मक मूल्यों की आवश्यकता होती है। फ्लोटिंग पॉइंट नंबर जिन्हें 'की आवश्यकता होती है।' (या ',' कुछ क्षेत्रों के लिए) दर्ज नहीं किया जा सकता है क्योंकि वे इन वर्णों को शामिल नहीं करते हैं।

— DrHall

अगर मुझे उपयोग करने की आवश्यकता है। (डॉट), मैं इसका उपयोग कैसे कर सकता हूं? यह पैटर्न केवल [0-9]

<input type = "text" pattern = "\ d *"> android पर काम नहीं करता है? मैंने ios पर परीक्षण किया और एंड्रॉइड पर सफलतापूर्वक काम नहीं किया। मैं इसे कैसे हल कर सकता हूं

— कमल

Answer 2

2015 के मध्य तक, मेरा मानना ​​है कि यह सबसे अच्छा समाधान है:

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

यह आपको एंड्रॉइड और iOS दोनों पर संख्यात्मक कीपैड देगा:

यह आपको अप / डाउन एरो बटन और कीबोर्ड फ्रेंडली अप / डाउन एरो की इंक्रीमेंट के साथ अपेक्षित डेस्कटॉप व्यवहार भी देता है:

इस कोड स्निपेट में इसे आज़माएं:

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

दोनों के संयोजन से type="number"और pattern="[0-9]*, हमें एक समाधान मिलता है जो हर जगह काम करता है। और, भविष्य के एचटीएमएल 5.1 प्रस्तावित inputmodeविशेषता के साथ इसके आगे संगत ।

नोट: एक पैटर्न का उपयोग करने से ब्राउज़र का मूल स्वरूप सत्यापन चालू हो जाएगा। आप इसे 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-ios न्यूमेरिक कीपैड/

Comments

HTML5 type="number" युक्ति कहता है कि निम्नलिखित सामग्री विशेषताओं को निर्दिष्ट नहीं किया जाना चाहिए और तत्व पर लागू नहीं होना चाहिए: ... inputmode

— Tgr

@ तेह आह, अच्छी पकड़। ऐसा प्रतीत होता है कि कल्पना लोगों को उपयोग <input type="text" inputmode="numeric">करना चाहती है और यह चाहती है कि मोबाइल ब्राउज़र inputmodeयह निर्धारित करने के लिए देखें कि क्या यह एक संख्यात्मक या पूर्ण कुंजीपटल दिखाता है। चूंकि कोई ब्राउज़र समर्थन नहीं करता है inputmode, इसलिए मैं अनिश्चित हूं कि इसका डेस्कटॉप या मोबाइल ब्राउज़र पर कैसे लागू किया जाएगा। Ex: क्या डेस्कटॉप ब्राउज़र अक्षर टाइपिंग की अनुमति देगा <input type="text" inputmode="numeric">? यदि हां, तो यह एक समस्या है। <input type="number">इसे रोकता है, केवल संख्याओं की अनुमति देता है। शायद हमें इंतज़ार करना होगा जब तक कि ब्राउज़र इसे लागू करना शुरू नहीं कर देते और तब हम इस उत्तर को अपडेट कर सकते हैं।

— आरोन ग्रे

के लिए समर्थन type="number"है सभ्य , लेकिन यह एक स्पिनर जो जैसे क्रेडिट कार्ड नंबर के ज्यादा मतलब नहीं है सुझा सकता है।

— TGR

प्रकार = "संख्या" होने से गधा एक्स में दर्द होता है (यदि इनपुट अमान्य है, तो आप जेएस में इनपुट का मूल्य प्राप्त नहीं कर पाएंगे, आप कर्सर की स्थिति प्राप्त नहीं कर सकते, आदि

— निकु Surdu

This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.

— माइकल Laffargue

Answer 3

मैंने पाया है कि, कम से कम "पासकोड" जैसे क्षेत्रों के लिए, कुछ ऐसा कर रहा है जो <input type="tel" />सबसे प्रामाणिक संख्या-आधारित क्षेत्र का उत्पादन करता है और इसमें बिना ऑटोफ़ॉर्मेटिंग के भी लाभ है । उदाहरण के लिए, हाल ही में हिल्टन के लिए विकसित एक मोबाइल एप्लिकेशन में, मैंने इस के साथ जाना समाप्त किया:

... और मेरा मुवक्किल बहुत प्रभावित हुआ।

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

Comments

मेरे लिए समस्या ऑटो-स्वरूपण नहीं थी, लेकिन सत्यापन था। टाइप के इनपुट numberकई ब्राउज़रों में संख्या के लिए सख्त नियम बनाते हैं। यदि उपयोगकर्ता हजारों को अलग करने के लिए स्थान (या अल्पविराम) जोड़ता है तो आपको इनपुट से कोई मूल्य नहीं मिलेगा। हां, जावास्क्रिप्ट में भी input.valueखाली होगा। प्रकार telका इनपुट विशिष्ट प्रारूप तक ही सीमित नहीं है, इसलिए उपयोगकर्ता अभी भी कुछ भी इनपुट कर सकता है और सत्यापन एक अलग प्रक्रिया है (डेवलपर को संभालने के लिए)।

— नक्स

मैं इस कीबोर्ड में दशमलव संख्या का उपयोग कैसे कर सकता हूं

— Anto

Answer 4

का उपयोग करना type="email"या type="url"आपको कम से कम कुछ फोन पर एक कीबोर्ड देगा, जैसे कि iPhone। फोन नंबर के लिए, आप उपयोग कर सकते हैं type="tel"।

Answer 5

<input type="text" pattern="\d*">संख्यात्मक कीबोर्ड को लाने के लिए उपयोग करने के साथ एक खतरा है । फ़ायरफ़ॉक्स और क्रोम पर, पैटर्न के भीतर निहित नियमित अभिव्यक्ति उस अभिव्यक्ति के इनपुट को मान्य करने के लिए ब्राउज़र का कारण बनती है। यदि यह पैटर्न से मेल नहीं खाता या रिक्त छोड़ दिया जाता है तो त्रुटियां होंगी। अन्य ब्राउज़रों में अनपेक्षित कार्यों से अवगत रहें।

Comments

novalidateयुक्त पर एक विशेषता जोड़ना form elementऑटो-सत्यापन समस्याओं से निपटना चाहिए। अपने आप कुछ सत्यापन करना सुनिश्चित करें।

— जस्टुस रोमिजन

Answer 6

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

इनपुटमोड के साथ आप ब्राउज़र को संकेत दे सकते हैं।

Answer 7

मुझे लगता type="number"है कि सिमेंटिक वेब पेज के लिए सबसे अच्छा है। यदि आप केवल कीबोर्ड बदलना चाहते हैं, तो आप उपयोग कर सकते हैं type="number"या कर सकते हैं type="tel"। दोनों मामलों में, iPhone उपयोगकर्ता इनपुट को प्रतिबंधित नहीं करता है। उपयोगकर्ता अभी भी (या पेस्ट में) वह किसी भी वर्ण को टाइप कर सकता है। एकमात्र परिवर्तन उपयोगकर्ता को दिखाया गया कीबोर्ड है। यदि आप इससे आगे कोई प्रतिबंध चाहते हैं, तो आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता है।

Comments

मेरे पास यह मुद्दा है कि टाइप = "नंबर" केवल फ्लोटिंग पॉइंट नंबरों के लिए माना जाता है - इसलिए कोई क्रेडिट कार्ड, ज़िप कोड या अन्य नंबरों का केवल तार नहीं। मैं उम्मीद कर रहा था कि सही कुंजीपटल डिस्प्ले बनाने के साथ-साथ इसे एन्कोडिंग करने का एक अर्थपूर्ण तरीका दोनों था। उपयुक्त प्रकार, मुझे लगता है, इनपुट प्रकार = "पाठ" होगा, लेकिन फिर गलत कीबोर्ड प्रदर्शित करता है। यदि आप मुझे कुछ जावास्क्रिप्ट करने के लिए कह सकते हैं, तो यह दोनों समस्याओं को हल करेगा।

— तमनी

type="number"फ्लोट के लिए है। type="text"स्ट्रिंग के लिए है। आप वास्तव में क्या चाहते हैं पूर्णांक है। मुझे लगता है कि फ्लोट स्ट्रिंग की तुलना में पूर्णांक के करीब है। तुम क्या सोचते हो?

— बिल्ली चेन

टाइप = "नंबर" से सावधान रहने वाली एक बात यह है कि क्रोम कम से कम इनपुट को एक संख्या होने के लिए मजबूर करेगा - जो रिक्त स्थान के साथ दर्ज किए गए क्रेडिट कार्ड नंबर को तोड़ देगा (उदाहरण के लिए)

— जॉन कार्टर

@therefromhere यह भी तरह ज़िप कोड बदल जाएगा 01920करने के लिए 1920।

— ceejayoz

यह भी गड़बड़ कर देगा अगर उपयोगकर्ता के पास अपने ब्राउज़र में एक अलग भाषा सेट है stackoverflow.com/questions/5345095/…

— 14:13 पर d

Answer 8

मेरे लिए सबसे अच्छा समाधान था:

पूर्णांक संख्याओं के लिए, जो एंड्रॉइड और आईफोन पर 0-9 पैड लाता है

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

आप फायरफॉक्स / क्रोम / सफारी में स्पिनरों को छिपाने के लिए भी ऐसा करना चाह सकते हैं, ज्यादातर क्लाइंट सोचते हैं कि वे बदसूरत दिखते हैं

 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" />

Answer 9

2018 में:

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

Android और iOS दोनों के लिए काम कर रहा है।

मैंने Android पर परीक्षण किया (^ 4.2) और iOS (11.3)

Answer 10

आप इस तरह की कोशिश कर सकते हैं:

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

लेकिन सावधान रहें: यदि आपके इनपुट में एक संख्या के अलावा कुछ और है, तो यह सर्वर को प्रेषित नहीं किया जाएगा।

Answer 11

मुझे एक प्रकार नहीं मिला, जो सभी स्थितियों में मेरे लिए सबसे अच्छा काम करता था: मुझे संख्यात्मक प्रविष्टि (उदाहरण के लिए "7.5" की प्रविष्टि) को डिफ़ॉल्ट करने की आवश्यकता थी, लेकिन निश्चित समय पर पाठ (उदाहरण के लिए "पास") की भी अनुमति दें। उपयोगकर्ता एक संख्यात्मक कीपैड (उदाहरण के लिए 7.5 का प्रवेश) चाहते थे, लेकिन सामयिक पाठ प्रविष्टि की आवश्यकता थी (उदाहरण के लिए "पास")।

बजाय इसके कि मैंने क्या किया था कि फॉर्म में एक चेकबॉक्स जोड़ें और टाइप = "संख्या" और टाइप = "टेक्स्ट" के बीच उपयोगकर्ता को मेरे इनपुट (आईडी = "इनपुटसर्सेल") को टॉगल करने की अनुमति दें।

<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");

    }
});

इसने हमारे लिए अच्छा काम किया।

Answer 12

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

यह संख्यात्मक की-पैड का उपयोग करके यू टेक्स्ट इनपुट देगा

Answer 13

आप inputmodeHTML विशेषता का उपयोग कर सकते हैं :

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

अधिक जानकारी के लिए, इनपुटमोड पर एमडीएन दस्तावेज़ देखें ।

Comments

यह जवाब @Ralf de Kleine द्वारा प्रस्तावित एक ही समाधान प्रदान करता है

— xKobalt

Answer 14

इसे इस्तेमाल करे:

$(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