HTML5 इनपुट प्रकार संख्या के साथ फ़्लोट्स और दशमलव विभाजकों को कैसे संभालना है


128

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

इस पूरे मेस को डॉट और कॉमा से कैसे कवर किया जाए?

मेरे निष्कर्ष:

डेस्कटॉप क्रोम

  • इनपुट प्रकार = संख्या
  • उपयोगकर्ता इनपुट क्षेत्र में "4,55" में प्रवेश करता है
  • $("#my_input").val(); "455" लौटाता है
  • मुझे इनपुट से सही मूल्य नहीं मिल सकता है

डेस्कटॉप फ़ायरफ़ॉक्स

  • इनपुट प्रकार = संख्या
  • उपयोगकर्ता इनपुट क्षेत्र में "4,55" में प्रवेश करता है
  • $("#my_input").val(); "4,55" देता है
  • ठीक है, मैं कॉमा को डॉट से बदल सकता हूं और सही फ्लोट प्राप्त कर सकता हूं

Android ब्राउज़र

  • इनपुट प्रकार = संख्या
  • उपयोगकर्ता इनपुट क्षेत्र में "4,55" में प्रवेश करता है
  • जब इनपुट फोकस खो देता है, तो मान को "4" पर काट दिया जाता है
  • उपयोगकर्ता को भ्रमित करना

विंडोज फोन 8

  • इनपुट प्रकार = संख्या
  • उपयोगकर्ता इनपुट क्षेत्र में "4,55" में प्रवेश करता है
  • $("#my_input").val(); "4,55" देता है
  • ठीक है, मैं कॉमा को डॉट से बदल सकता हूं और सही फ्लोट प्राप्त कर सकता हूं

इस तरह की स्थितियों में "सर्वोत्तम अभ्यास" क्या हैं जब उपयोगकर्ता दशमलव विभाजक के रूप में अल्पविराम या डॉट का उपयोग कर सकता है और मैं बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए html इनपुट प्रकार को नंबर के रूप में रखना चाहता हूं?

क्या मैं कॉमा को डॉट "कन्वर्ट ऑन द फ्लाई" में बदल सकता हूं, जो महत्वपूर्ण घटनाओं को बाध्य करता है, क्या यह नंबर इनपुट के साथ काम कर रहा है?

संपादित करें

Currenlty मेरे पास कोई हल नहीं है, कैसे इनपुट से फ्लोट मान (स्ट्रिंग या संख्या के रूप में) प्राप्त किया जाए जो प्रकार संख्या पर सेट है। यदि एंड्यूसर "4,55" में प्रवेश करता है, तो क्रोम हमेशा "455" देता है, फ़ायरफ़ॉक्स "4,55" देता है जो ठीक है।

यह भी काफी कष्टप्रद है कि एंड्रॉइड (4.2 एमुलेटर का परीक्षण किया गया) में, जब मैं इनपुट क्षेत्र में "4,55" दर्ज करता हूं और फोकस को कहीं और बदल देता हूं, तो दर्ज संख्या "4" से कम हो जाती है।


मेरा अनुमान है कि आपकी कुछ समस्याओं का मूल कारण यह है कि ब्राउज़र एक अमेरिकी स्थान पर सेट होते हैं जो दशमलव विभाजक के रूप में डॉट का उपयोग करता है। ऐसा लगता है कि क्रोम और एंड्रॉइड इसे अलग-अलग तरीकों से भ्रमित कर रहे हैं - क्रोम कॉमा को एक विभाजक के रूप में मानता है, फिर इनपुट को एक नंबर में परिवर्तित करता है, फिर इसे फिर से स्ट्रिंग के लिए परिवर्तित .val()करता है, और एंड्रॉइड कुछ अजीब करता है। क्या आप जाँच सकते हैं कि जब वे सिस्टम भाषा को किसी उपयुक्त चीज़ पर सेट करते हैं तो वे उसी तरह का व्यवहार करते हैं?
22

1
Nvm ने इसे उत्तर के रूप में पोस्ट किया
kjetilh

यहां भी देखें: stackoverflow.com/a/24423879/196210
रिजल्ट

आपके द्वारा चित्रित की तुलना में स्थिति और भी बदतर है: जिस भाषा पर आपने काम करने के लिए अपना कीबोर्ड चुना था, उसके आधार पर आपको WP अंकपैड पर एक दशमलव बिंदु या अल्पविराम मिलता है। यह भी पता लगाने का कोई तरीका नहीं है कि कौन सा इनपुट लोकेल था (आवश्यक रूप से पसंदीदा ब्राउज़र की भाषा नहीं) ... तो सबसे अच्छा मैं साथ आ सकता था (और मेरे लिए क्या अच्छा है): var number = $(...).get(0).valueAsNumber; if (isNaN(number)) number = parseFloat($(...).val().replace(',', '.'); लेकिन वह समाधान केवल काम करता है अगर संख्या है कि केवल 1 अल्पविराम और कोई अतिरिक्त डॉट्स में डाल दिया गया है ...
bert bynynooghe

जवाबों:


107

मुझे लगता है कि ऊपर दिए गए जवाबों में क्या गायब है step, विशेषता के लिए एक अलग मूल्य निर्दिष्ट करने की आवश्यकता है , जिसका डिफ़ॉल्ट मान है 1। यदि आप फ्लोटिंग-पॉइंट मानों की अनुमति देने के लिए इनपुट के सत्यापन एल्गोरिथम चाहते हैं, तो तदनुसार एक कदम निर्दिष्ट करें।

उदाहरण के लिए, मुझे डॉलर की राशि चाहिए थी, इसलिए मैंने इस तरह एक कदम निर्दिष्ट किया:

 <input type="number" name="price"
           pattern="[0-9]+([\.,][0-9]+)?" step="0.01"
            title="This should be a number with up to 2 decimal places.">

मान प्राप्त करने के लिए jQuery का उपयोग करने में कुछ भी गलत नहीं है, लेकिन आप तत्वों की validity.validसंपत्ति प्राप्त करने के लिए सीधे DOM API का उपयोग करना उपयोगी पाएंगे ।

मेरे पास दशमलव बिंदु के साथ एक समान मुद्दा था, लेकिन जिस कारण से मुझे एहसास हुआ कि एक मुद्दा यह था कि स्टाइल के कारण ट्विटर बूटस्ट्रैप एक अमान्य मान के साथ संख्या इनपुट में जोड़ता है।

यहां यह दर्शाया गया है कि stepविशेषता जोड़ने से यह काम करता है, और यह भी परीक्षण करता है कि वर्तमान मूल्य मान्य है या नहीं:

टीएल; डीआर: एक stepविशेषता को फ्लोटिंग-पॉइंट मान पर सेट करें , क्योंकि यह चूक करता है 1

नोट : अल्पविराम मेरे लिए मान्य नहीं है, लेकिन मुझे संदेह है कि अगर मैं अपनी ओएस भाषा / क्षेत्र सेटिंग्स को कहीं पर सेट करता हूं जो दशमलव विभाजक के रूप में अल्पविराम का उपयोग करता है, तो यह काम करेगा। * नोट इन नोट *: यह उबुन्टू / सूक्ति 14.04 में ओएस भाषा / कीबोर्ड सेटिंग्स * जर्मन * के लिए ऐसा नहीं था।


8
यदि आप मनमाने ढंग से कई दशमलव स्थानों की अनुमति देना चाहते हैं, तो यहां दिखाए गए अनुसार उदाहरण के बजाय stepविशेषता निर्दिष्ट करें। डेमो के लिए नाथिकेटा की फ़िडेल के इस ट्वीक किए गए संस्करण को देखें । "any""0.01"
मार्क एमी

4
मैं कॉमा को मान्य नहीं करने वाले मुद्दों में भी भाग गया, हालांकि मैं "1,234.56" में प्रवेश कर रहा था <input type="number" step="any">। मैं HTML5 सत्यापन को बंद करने का एक तरीका नहीं ढूंढ सका हूं। मैं त्रुटि संदेश को बंद या अनुकूलित कर सकता हूं, लेकिन इनपुट से मूल्य को प्राप्त करना हमेशा एक लालसा है। कोई विचार?
निक जी।

5
This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.इसलिए पैटर्न बेकार हैtype="number"
माइकल लाफार्गेल

जैसे माइकल ने कहा, कृपया इसे बदल typeदें text, अन्यथा आपके जवाब का कोई मतलब नहीं है।
22:29 पर phil294

23

W3.org के अनुसार , संख्या इनपुट के मूल्य विशेषता को फ्लोटिंग-पॉइंट नंबर के रूप में परिभाषित किया गया है । फ्लोटिंग-पॉइंट संख्या का सिंटैक्स केवल दशमलव विभाजक के रूप में डॉट्स को स्वीकार करता है।

मैंने नीचे कुछ विकल्प सूचीबद्ध किए हैं जो आपके लिए उपयोगी हो सकते हैं:

1. पैटर्न विशेषता का उपयोग करना

उसके साथ पैटर्न विशेषता आप एक एचटीएमएल 5 संगत रास्ते में एक नियमित अभिव्यक्ति के साथ अनुमति दी प्रारूप निर्दिष्ट कर सकते हैं। यहां आप यह निर्दिष्ट कर सकते हैं कि यदि पैटर्न विफल रहता है, तो अल्पविराम वर्ण की अनुमति दी जाती है और एक उपयोगी प्रतिक्रिया संदेश दिया जाता है।

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num"
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

नोट: क्रॉस-ब्राउज़र समर्थन बहुत भिन्न होता है। यह पूर्ण, आंशिक या गैर-मौजूद हो सकता है।

2. जावास्क्रिप्ट सत्यापन

आप के लिए उदाहरण के लिए एक सरल कॉलबैक बाध्य करने के लिए कोशिश कर सकते onchange (और / या ब्लर ) ईवेंट के जो या तो कॉमा को बदल देगा या सभी को एक साथ मान्य करेगा।

3. ब्राउज़र सत्यापन अक्षम करें ##

तीसरी बात यह कि आप एक साथ उस क्षेत्र के लिए ब्राउज़र सत्यापन को अक्षम करने के इरादे से नंबर इनपुट पर formnovalidate विशेषता का उपयोग करने का प्रयास कर सकते हैं।

<input type="number" formnovalidate />

4. संयोजन ..?

<input type="number" pattern="[0-9]+([,\.][0-9]+)?" 
           name="my-num" formnovalidate
           title="The number input must start with a number and use either comma or a dot as a decimal character."/>

2
input.valueAsNumber - यह कोई मदद नहीं करता क्योंकि यह केवल दशमलव विभाजक के रूप में डॉट्स के साथ काम करता है और मेरे मामले में एंड्यूसर डॉट या अल्पविराम का उपयोग कर सकता है। फॉर्म टैग नोवेलिडेट - इस पर कोई प्रभाव नहीं पाया गया है।
देव

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

ऐसा लगता है कि इनपुट प्रकार संख्या वास्तव में उपयोगकर्ता अनुभव को बेहतर बनाने की तुलना में अधिक समस्याएं उत्पन्न करती है। मोबाइल डिवाइस में यह बहुत अच्छा होगा यदि मैं उपयोगकर्ता को केवल संख्यात्मक कीबोर्ड खोल सकता हूं यदि मैं उन्हें केवल संख्याओं में इनपुट करना चाहता हूं। वैसे भी मुझे इस पर एक बार फिर से विचार करने की जरूरत है ...
devha

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

9

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

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


7

के valueAsNumberबजाय का उपयोग करें .val()

इनपुट valueAsNumber [= value]

प्रपत्र नियंत्रण के मान का प्रतिनिधित्व करने वाली संख्या लौटाता है, यदि लागू हो; अन्यथा, अशक्त देता है।
मूल्य बदलने के लिए सेट किया जा सकता है।
यदि कोई नियंत्रण दिनांक या समय-आधारित या संख्यात्मक नहीं है, तो एक INVALID_STATE_ERR अपवाद फेंकता है।


2
समस्या यह है कि वह दशमलव विभाजक के रूप में अल्पविराम का समर्थन करना चाहता है, और इनपुट पर सभी प्रकार = "संख्या" का उपयोग करते हुए अमान्य लेख लिखते समय अमान्य नंबर देता है।
भय

विंडोज फोन पर लगातार काम नहीं करने लगता है; हमेशा लौटता है NaN
बर्ट ब्रूएनोघे

@bertbruynooghe, आप मूल्य के रूप में क्या बता रहे हैं?
माइक सैमुअल

काम करने के लिए नहीं लगता है, न ही '9', '9,1', '9.1' के साथ। फोन को यूएस, कीबोर्ड लेआउट द्वारा परीक्षित en-US, nl-BE के रूप में कॉन्फ़िगर किया गया है।
बर्ट ब्रूएनोघे

4

एक पाठ प्रकार का उपयोग करता है, लेकिन संख्यात्मक कीबोर्ड की उपस्थिति को मजबूर करता है

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

inputmode टैग समाधान है


लेकिन यह सभी ब्राउज़रों के साथ संगत नहीं है, केवल iOS सफारी, क्रोम, क्रोमियम, ओपेरा के नवीनतम संस्करणों के साथ ... caniuse.com/#feat=input-inputmode :(
pgarciacamou

और इसके अलावा आप मोबाइल उपकरणों पर इस स्वच्छ नंबर कीबोर्ड नहीं मिलता है।
15

3

मुझे एक सही समाधान नहीं मिला है लेकिन मैं जो सबसे अच्छा कर सकता था वह टाइप = "टेल" का उपयोग करना था और एचटीएमएल 5 सत्यापन को अक्षम करना (फॉर्मनोविलेजिएट):

<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />

यदि उपयोगकर्ता एक अल्पविराम में डालता है तो मैं हर आधुनिक ब्राउज़र में कॉमा के साथ आउटपुट करेगा (नवीनतम एफएफ, आईई, एज, ओपेरा, क्रोम, सफारी डेस्कटॉप, एंड्रॉइड क्रोम)।

मुख्य समस्या है:

  • मोबाइल उपयोगकर्ता अपने फोन कीबोर्ड को देखेंगे जो संख्या कीबोर्ड से भिन्न हो सकता है।
  • इससे भी बदतर फोन कीबोर्ड में अल्पविराम की कुंजी भी नहीं हो सकती है।

मेरे उपयोग के मामले के लिए मुझे केवल:

  • अल्पविराम के साथ प्रारंभिक मूल्य प्रदर्शित करें (फ़ायरफ़ॉक्स इसे टाइप = संख्या के लिए स्ट्रिप्स करता है)
  • HTML5 सत्यापन विफल नहीं (यदि अल्पविराम है)
  • क्या क्षेत्र को बिल्कुल इनपुट के रूप में पढ़ा जाता है (संभव अल्पविराम के साथ)

यदि आपके पास एक समान आवश्यकता है तो यह आपके लिए काम करना चाहिए।

नोट: मुझे पैटर्न विशेषता का समर्थन पसंद नहीं आया। Formnovalidate बहुत बेहतर काम करने लगता है।


1

जब आप कॉल करते हैं तो $("#my_input").val();यह स्ट्रिंग चर के रूप में लौटता है। तो उपयोग करें parseFloatऔर parseIntपरिवर्तित करने के लिए। जब आप parseFloatअपने डेस्कटॉप या फोन का उपयोग करते हैं तो ITSELF चर का अर्थ समझता है।

और इसके अलावा आप एक फ्लोट को स्ट्रिंग में परिवर्तित कर सकते हैं toFixedजिसके नीचे एक तर्क है कि अंकों की संख्या नीचे दी गई है:

var i = 0.011;
var ss = i.toFixed(2); //It returns 0.01

काम नहीं करता। IE11 में parseFloat ("1,5") आज़माएँ। रिटर्न 1. भाषा ओएस और IE दोनों के लिए जर्मन है।
T3rm1

1

स्पष्ट रूप से ब्राउज़रों को अभी भी परेशानी है (हालांकि क्रोम और फ़ायरफ़ॉक्स नाइटली ठीक करते हैं)। मेरे पास उन लोगों के लिए एक घिनौना दृष्टिकोण है जो वास्तव में एक नंबर फ़ील्ड का उपयोग करना है (शायद इसलिए कि छोटे तीर जो पाठ फ़ील्ड में नहीं हैं)।

मेरा समाधान

मैंने एक keyupघटना हैंडलर को फॉर्म इनपुट में जोड़ा और राज्य को ट्रैक किया और मान को एक बार फिर से मान्य होने पर सेट किया।

शुद्ध जेएस स्निपेट JSFIDDLE

कोणीय 9 स्निपेट


0

मेरी सिफारिश? JQuery का उपयोग बिल्कुल न करें। मुझे आप जैसी ही समस्या थी। मैने पाया कि$('#my_input').val() हमेशा कुछ अजीब परिणाम लौटते हैं।

document.getElementById('my_input').valueAsNumberइसके बजाय $("#my_input").val();और फिर उपयोग करने की कोशिश करेंNumber(your_value_retrieved) करने की कोशिश एक संख्या बनाने की कोशिश करने के लिए करें। यदि मान NaN है, तो आप निश्चित रूप से जानते हैं कि यह संख्या नहीं है।

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

ओह, और BTW, जो आपके उपयोगकर्ताओं को अंतर्राष्ट्रीयकरण जोड़ने की अनुमति देता है (यानी दशमलव संख्या बनाने के लिए डॉट्स के बजाय कॉमा का समर्थन करता है)। बस Number()वस्तु को आपके लिए कुछ बनाने के लिए और यह दशमलव-सुरक्षित होगा, इसलिए बोलने के लिए।


समस्या jQuery के कारण नहीं है, और मुझे लगता valueAsNumberहै कि ब्राउज़र के साथ भी लगातार काम नहीं कर रहा है।
बर्ट ब्रूएनोघे

0

ऐसा लगता है कि आप अपने सांख्यिक इनपुट पर toLocaleString () का उपयोग करना चाहते हैं।

Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString देखेंइसके उपयोग के लिए ।

जेएस में संख्याओं का स्थानीयकरण भी अंतर्राष्ट्रीयकरण में शामिल है (संख्या स्वरूपण "num.toLocaleString ()") क्रोम के लिए काम नहीं कर रहा है


2
यह आम तौर पर समाधान की अधिक व्याख्या देने के लिए है, भले ही जवाब अगर पूरी तरह से जुड़ा हुआ सामग्री द्वारा कवर किया गया हो।
इवान

यह दृष्टिकोण अन्य तरीकों से बेहतर लगता है यदि बैक एंड सर्वर ब्राउज़र के बजाय लोकेल का निर्धारण कर रहा है। दुर्भाग्य से, toLocaleStringप्लेटफार्मों में विश्वसनीय नहीं है।
बर्ट ब्रूएनोघे

2015 में क्रॉस प्लेटफॉर्म सपोर्ट मेरे लिए पर्याप्त है, उदाहरण के लिए मोज़िला डेनेट देखें । हालांकि, अगर यह अभी भी आपके लिए चिंता का विषय है, तो यहां संभव समाधान खोजें।
स्टैकसेक

मोज़िला देवनेट मोबाइल ब्राउज़र के लिए लगभग कोई हमदर्दी नहीं दिखाता है, और यही वह जगह है जहाँ संख्यात्मक टेक्स्टफील्ड सबसे अधिक लाभ प्रदान कर सकते हैं। (मूल प्रश्न देखें।)
बर्ट ब्रूनोघे

... और पर्याप्त से अधिक विकल्प दिखाए और संदर्भित किए गए हैं। मज़े करो।
स्टैकेसेक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.