HTML5 में फ्लोट इनपुट प्रकार है?

816

Html5.org के अनुसार , "संख्या" इनपुट प्रकार की "मूल्य विशेषता, यदि निर्दिष्ट और खाली नहीं है, तो एक मान होना चाहिए जो एक मान्य फ्लोटिंग पॉइंट संख्या है।"

फिर भी यह बस (क्रोम के नवीनतम संस्करण में, वैसे भी), पूर्णांक के साथ एक "अपडाउन" नियंत्रण, तैरता नहीं है:

<input type="number" id="totalAmt"></input>

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

क्या HTML5 के लिए एक मूल बिंदु इनपुट तत्व मूल है, या संख्या इनपुट प्रकार को फ्लोट्स के साथ काम करने का एक तरीका है, न कि इन्टस? या मुझे jQuery UI प्लगइन का सहारा लेना चाहिए?

html input floating-point

— बी क्ले शैनन
स्रोत

1659

numberप्रकार एक है stepमूल्य को नियंत्रित करने जो संख्या मान्य हैं (साथ साथ maxऔर min) है, जो करने के लिए चूक 1। इस मान का उपयोग स्टेपर बटन के लिए कार्यान्वयन के द्वारा भी किया जाता है (जैसे कि दबाव बढ़ता है step)।

जो भी उचित हो, बस इस मान को बदलें। पैसे के लिए, दो दशमलव स्थान संभवतः अपेक्षित हैं:

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

(मैं यह भी सेट min=0कर सकता हूँ कि यह केवल सकारात्मक हो सकता है)

यदि आप किसी भी दशमलव स्थानों की अनुमति देना चाहते हैं, तो आप step="any"(हालांकि मुद्राओं के लिए, मैं चिपके रहने की सलाह दूंगा 0.01) का उपयोग कर सकता हूं । क्रोम और फ़ायरफ़ॉक्स में, स्टेपर बटन का उपयोग करते समय 1 से वृद्धि / कमी होगी any। (इशारा करने के लिए मिशल स्टेफानो के जवाब के लिए धन्यवाद any, और संबंधित युक्ति यहां देखें )

यहाँ एक खेल का मैदान दिखाया गया है कि विभिन्न कदम विभिन्न इनपुट प्रकारों को कैसे प्रभावित करते हैं:

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>

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

हमेशा की तरह, मैं एक त्वरित नोट जोड़ूंगा: याद रखें कि क्लाइंट-साइड सत्यापन उपयोगकर्ता के लिए सिर्फ एक सुविधा है। आपको सर्वर-साइड पर भी मान्य होना चाहिए!

— डेव
स्रोत

1

जब तक आप कुछ वर्णों का उपयोग नहीं करना चाहते हैं, तब तक @ Elfayer के संपादन: उद्धरण HTML में वैकल्पिक हैं। व्यक्तिगत रूप से मैं उन्हें छोड़ना पसंद करता हूं जहां बेहतर पठनीयता के लिए संभव है।

— डेव

5

फ़ायरफ़ॉक्स के नवीनतम संस्करणों में यह सही तरीके से काम नहीं कर रहा है: Bugzilla.mozilla.org/show_bug.cgi?id=1003896

— trpt4him

7

@Dave: हाँ, तकनीकी रूप से, उद्धरणों को छोड़ देना ठीक है, क्योंकि यह संभावित मुद्दों की मेजबानी करता है। सबसे पहले, पात्रों का एक सबसेट अलग-अलग ब्राउज़रों और संस्करणों में अलग-अलग तरीके से संभाला जाता है। यदि आप उद्धरणों का उपयोग नहीं करने का चयन करते हैं, तो आपको लगातार इस बात का संज्ञान होना चाहिए कि कौन से अक्षर प्रत्येक ब्राउज़र और संस्करण में समस्याएँ पैदा करेंगे। यह बहुत सी मानसिक शक्ति है जो किसी चीज के लिए समर्पित है यदि आप केवल उद्धरण का उपयोग करते हैं तो इसके बारे में चिंता करना आवश्यक नहीं है। (cont।)

— क्रिस प्रैट

9

दूसरा, जब आप नियमों के बारे में चिंता करने के साथ ठीक हो सकते हैं कि कौन से अक्षर ठीक हैं और कौन से नहीं हैं, तो डेवलपर जो आपके पीछे आता है वह शायद नहीं होगा। इसके बाद यह आवश्यक है कि वे या तो उन सभी विशेषताओं के उद्धरण जोड़ने के कठिन कार्य को सहन करें, जिन्हें आपने निर्विरोध या बदतर रूप से छोड़ दिया है, बस समस्याओं को उस कोड में प्रस्तुत करें जिसे वे शायद स्रोत भी नहीं समझ सकते। अंत में, के बाद से कभी कभी तुम होगा है उद्धरण चिह्नों का उपयोग करने के लिए, कोड तो कुछ विशेषताओं उद्धृत और दूसरों को नहीं के साथ असंगत लग रहा है।

— क्रिस प्रैट

2

@relipse यहां देखें: stackoverflow.com/q/3790935/1180785 लेकिन प्रत्येक उत्तर के लिए टिप्पणियों को पढ़ना सुनिश्चित करें; ऐसा लगता है कि सभी विकल्पों में कमियां हैं, और आपको यह देखना होगा कि आपकी विशेष आवश्यकताएं क्या हैं।

— डेव

153

वाया: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

लेकिन क्या होगा यदि आप चाहते हैं कि सभी संख्याएँ मान्य हों, पूर्णांक और दशमलव एक जैसे हों? इस स्थिति में, "किसी भी" पर कदम रखें

<input type="number" step="any" />

Chrome में मेरे लिए काम करता है, अन्य ब्राउज़रों में परीक्षण नहीं किया गया है।

— मंगल रॉबर्टसन
स्रोत

4

Chrome => सही सफ़ारी काम करता है => त्रुटि संदेश नहीं दिखाएगा, और यदि संख्या नहीं है तो यह सर्वर IE => 10 से कम नहीं संस्करण को पारित नहीं करेगा, काम करता है

— Abhi

4

दुर्भाग्य से क्रोम में यह आपको एक आईपी पते के लिए कई दशमलव बिंदुओं को दर्ज करने की अनुमति देता है।

— एंडी

18

आप उपयोग कर सकते हैं:

<input type="number" step="any" min="0" max="100" value="22.33">

— alvarodoune
स्रोत

12

आप इनपुट प्रकार संख्या के लिए चरण विशेषता का उपयोग कर सकते हैं:

<input type="number" id="totalAmt" step="0.1"></input>

step="any"किसी भी दशमलव की अनुमति देगा।
step="1"कोई दशमलव नहीं होने देगा।
step="0.5"0.5 की अनुमति देगा; 1; 1.5; ...
step="0.1"0.1 की अनुमति देगा; 0.2; 0.3; 0.4; ...

— आंद्रेई थुलर
स्रोत

8

इस उत्तर के आधार पर

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

अर्थ:

चार कोड:

48-57 के बराबर 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
0 है Backspace(अन्यथा फ़ायरफ़ॉक्स पर ताज़ा पृष्ठ की आवश्यकता है)
46 है dot

&&है AND, ||है ORऑपरेटर।

यदि आप अल्पविराम से तैरने की कोशिश करते हैं:

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

समर्थित क्रोमियम और फ़ायरफ़ॉक्स (लिनक्स एक्स 64) (अन्य ब्राउज़र जो मेरे पास मौजूद नहीं हैं।)

— dsgdfg
स्रोत

पिछड़ा महसूस होता है। क्षेत्र में कॉपी और पेस्ट के बारे में कैसे?

— मंगल

इस विधि का उपयोग करें, लेकिन @MichalStefanow डालने से पहले सत्यापन की आवश्यकता है

— dsgdfg

4

इनपुट के लिए हैक, कॉपी और पेस्ट के लिए हैक, एक हैक के शीर्ष पर हैक = बुरा अभ्यास। हमारे पास 2017

— मार्स रॉबर्टसन

आपने कोई पासवर्ड इनपुट कहाँ पढ़ा है? एक सत्र के बाद कौन सी विधि का उपयोग करना है? नहीं, हमारे पास 1856 है! किसी अन्य उपयोगकर्ता की कोशिश करो!

— dsgdfg

बहुत जटिल लगता है, लेकिन, इस विधि पर तर्क बनाम अन्य का उल्लेख नहीं किया गया

— WebDude0482

6

मैं ऐसा ही करता हूँ

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

फिर, मैं 0.4 और अधिकतम 0.7 मिनट में 0.01: 0.4, 0.41, 0,42 ... 0.7 के साथ मिनट में परिभाषित करता हूं

— sadalsuud
स्रोत

4

मुझे बस एक ही समस्या थी, और मैं फ्रेंच कॉर्फ़िकेशन की वजह से सिर्फ कॉमा लगाकर इसे ठीक कर सकता था, न कि एक अवधि / पूर्ण विराम ।

तो यह साथ काम करता है:

2 ठीक है

2,5 ठीक है

2.5 KO है (संख्या को "अवैध" माना जाता है और आपको खाली मान प्राप्त होता है)।

— स्टीफ़न
स्रोत

3

इनपुट या किसी भी अभिभावक के लिए lang = "en" जोड़ें और यह अंग्रेजी नंबर शैली का उपयोग करना शुरू कर देगा

— user1040495