कच्चा मान <इनपुट प्रकार = "संख्या"> फ़ील्ड कैसे प्राप्त करें?

Question

मैं किसी क्षेत्र का "वास्तविक" मूल्य कैसे प्राप्त कर सकता हूं <input type="number">?

---

मेरे पास एक inputबॉक्स है, और मैं नए HTML5 इनपुट प्रकार का उपयोग कर रहा हूं number:

<input id="edQuantity" type="number">

यह ज्यादातर Chrome 29 में समर्थित है:

इनपुट बॉक्स में उपयोगकर्ता को "कच्चे" मूल्य को पढ़ने की क्षमता है । यदि उपयोगकर्ता ने एक नंबर दर्ज किया है:

तब edQuantity.value = 4, और सब ठीक है।

लेकिन अगर उपयोगकर्ता अमान्य पाठ में प्रवेश करता है, तो मैं इनपुट-बॉक्स को लाल रंग देना चाहता हूं:

दुर्भाग्य से, type="number"इनपुट बॉक्स के लिए, यदि पाठ बॉक्स में मान एक संख्या नहीं है, तो valueएक खाली स्ट्रिंग लौटाता है:

edQuantity.value = "" (String);

(क्रोम 29 में कम से कम)

मैं एक नियंत्रण का "कच्चा" मूल्य कैसे प्राप्त कर सकता हूं <input type="number">?

मैंने इनपुट बॉक्स के अन्य गुणों की क्रोम सूची के माध्यम से देखने की कोशिश की:

मैंने ऐसा कुछ नहीं देखा जो वास्तविक इनपुट जैसा दिखता हो।

न ही मुझे यह बताने का कोई तरीका मिल सकता है कि क्या बॉक्स "खाली" है , या नहीं। शायद मैं अनुमान लगा सकता था:

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

नोट : आप क्षैतिज नियम के बाद सब कुछ अनदेखा कर सकते हैं; यह सवाल का औचित्य साबित करने के लिए सिर्फ भराव है। इसके अलावा: प्रश्न के साथ उदाहरण को भ्रमित न करें। लोग इस सवाल का जवाब बॉक्स लाल रंग के अलावा अन्य कारणों से चाहते हैं (एक उदाहरण: onBlur घटना के दौरान पाठ "four"को लैटिन "4"प्रतीक में परिवर्तित करना )

मैं एक नियंत्रण का "कच्चा" मूल्य कैसे प्राप्त कर सकता हूं <input type="number">?

बोनस पढ़ना

• उपरोक्त सभी के jsFiddle (अद्यतन)
• नए इनपुट प्रकारों के लिए Quirkmode.org प्रविष्टि

Comments

किसी संख्यात्मक इनपुट फ़ील्ड का 'वास्तविक' मान एक संख्या होना चाहिए। यदि आप संख्यात्मक मानों के अलावा इनपुट की अनुमति देना चाहते हैं, तो numberवह इनपुट प्रकार नहीं है जिसकी आप तलाश कर रहे हैं; एक सामान्य textइनपुट का उपयोग करें ।

— रोबर्टेक

@robertc Chrome वह एजेंट है जो संख्याओं के अलावा अन्य इनपुट की अनुमति देता है; मुझे सिर्फ यह जानना है कि वे संख्याओं के अलावा अन्य चीजों में प्रवेश कर चुके हैं।

— इयान बॉयड

क्षेत्र की validityस्थिति की जाँच करें - मैं उम्मीद typeMismatchकरूँगा लेकिन मैंने खुद की जाँच नहीं की है।

— रोबर्टेक

@ int32_t छठी पंक्ति नीचे पढ़ें (अर्थात "यदि उपयोगकर्ता प्रवेश करता है ..." )

— इयान बॉयड

मेरा उपयोग मामला ... मेरे पास दो संख्यात्मक क्षेत्र हैं: अक्षांश और देशांतर। अगर कोई "लेट, लोन" में चिपके और उचित तरीके से हैंडल करना चाहता है, तो मैं उसका पता लगाऊंगा। यह वर्तमान में टाइप = "संख्या" के साथ असंभव है। चूंकि "लाट, लोन" अमान्य है .. पर रेगेक्स करने के लिए "कच्चा" मान प्राप्त करने का कोई तरीका नहीं है। एक अन्य उपयोग मामला: ग्राहक त्रुटि प्रदर्शित करना: " blahएक अमान्य संख्या है"।

— ब्रैड केंट

Answer 1

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

मूल्य सफ़ाई एल्गोरिथ्म इस प्रकार है: यदि मूल्य तत्व की एक नहीं है मान्य फ़्लोटिंग-बिंदु संख्या है, तो बजाय रिक्त स्ट्रिंग पर सेट करें।

प्रकार निर्दिष्ट करके ( <input type="number">) आप ब्राउज़र को आपके लिए कुछ काम करने के लिए कह रहे हैं। यदि, दूसरी ओर, आप गैर-संख्यात्मक इनपुट को कैप्चर करने में सक्षम होना चाहते हैं और इसके साथ कुछ करना चाहते हैं, तो आपको पुराने आजमाए हुए और सच्चे टेक्स्ट इनपुट फ़ील्ड पर भरोसा करना होगा और सामग्री को स्वयं पार्स करना होगा।

डब्ल्यू 3 भी एक ही चश्मा है और कहते हैं:

उपयोगकर्ता एजेंटों को उपयोगकर्ता को एक गैर-रिक्त स्ट्रिंग पर मान सेट करने की अनुमति नहीं देनी चाहिए जो एक मान्य फ़्लोटिंग-पॉइंट संख्या नहीं है।

Comments

यह उपयोगी होगा यदि उपयोगकर्ता एजेंटों ने उपयोगकर्ता को एक गैर-रिक्त स्ट्रिंग के लिए मान सेट करने की अनुमति नहीं दी जो कि एक मान्य फ़्लोटिंग-पॉइंट संख्या नहीं है। लेकिन अगर whatwg कहता है कि यह नहीं किया जा सकता है; तो इसका जवाब है। मेरी वर्तमान आवश्यकता के लिए समाधान नीचे जोड़ा गया है।

— इयान बॉयड

प्रकार निर्दिष्ट करके ( <input type="number">) आप ब्राउज़र को आपके लिए कुछ काम करने के लिए कह रहे हैं। व्यक्तिगत रूप से, मैं सिर्फ मोबाइल ब्राउज़रों को एक संख्यात्मक कीपैड दिखाने के लिए कह रहा था, और एक अप्रिय अतिरिक्त के रूप में मान्यता मिली। इन समस्याओं में से अधिकांश इस तथ्य से उपजी हैं कि typeविशेषता सत्यापन विधि और नियम दोनों को निर्धारित करती है कि किस इनपुट तंत्र को प्रदर्शित किया जाए, लेकिन यह डेस्कटॉप उपयोगकर्ताओं के लिए लागू किए गए नंबर सत्यापन के बिना मोबाइल उपयोगकर्ताओं को एक संख्यात्मक कीबोर्ड दिखाना चाहते हैं। HTML 5.1 कम से कम इस समस्या को अंततः inputmodeविशेषता के साथ हल करेगा ।

— मार्क अमेरी

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

— संदर्भ देना

इसके अलावा, विभिन्न भाषाओं में, जैसे कि फ्रेंच, संख्या के लिए 2 शब्द हैं। एक पहचानकर्ता के रूप में संख्याओं के लिए, जैसे क्रेडिट कार्ड नंबर, और एक गिनती संख्याओं के लिए, जैसे कि फ्लोटिंग पॉइंट नंबर।

— njzk2

@MotiKorets फ्लोटिंग पॉइंट नंबरों को दर्ज करने के लिए काम नहीं करता है क्योंकि iPhones कीबोर्ड पर दशमलव बिंदु नहीं डालते हैं। दुर्भाग्य से देवता इस समय बहुत खराब हैं, जहां तक ​​एक अच्छा फ्लोटिंग पॉइंट एंट्री UX प्रदान करता है ...

— एंडी

Answer 2

यह प्रश्न का उत्तर नहीं देता है, लेकिन जांच करने के लिए उपयोगी है

edQuantity.validity.valid

ValidityStateएक वस्तु का क्या उपयोगकर्ता द्वारा दर्ज के बारे में सुराग देता है। type="number"एक minऔर maxसेट के साथ एक इनपुट पर विचार करें

<input type="number" min="1" max="10">

हम हमेशा उपयोग करना चाहते हैं .validity.valid।

अन्य गुण केवल बोनस जानकारी देते हैं:

User's Input  .value  .valid | .badInput  .rangeUnderflow  .rangeOverflow
============  ======  ====== | =========  ===============  ==============
""            ""      true   | false      false            false  ;valid because field not marked required
"1"           "1"     true   | false      false            false  
"10"          "10"    true   | false      false            false
"0"           "0"     false  | false      true             false  ;invalid because below min
"11"          "11"    false  | false      false            true   ;invalid because above max
"q"           ""      false  | true       false            false  ;invalid because not number
"³"           ""      false  | true       false            false  ;superscript digit 3
"٣"           ""      false  | true       false            false  ;arabic digit 3
"₃"           ""      false  | true       false            false  ;subscript digit 3

आपको यह सुनिश्चित करना होगा कि ब्राउज़र उपयोग करने से पहले HTML5 सत्यापन का समर्थन करता है:

function ValidateElementAsNumber(element)
{
   //Public Domain: no attribution required.
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it's bad: it's bad
      return false;
   }

   //Fallback to browsers that don't yet support html5 input validation
   //Or we maybe want to perform additional validations
   var value = StrToInt(element.value);
   if (value != null)
      return true;
   else
      return false;
}

बक्शीश

Spudly का एक उपयोगी उत्तर है जिसे उसने हटा दिया:

इसके लिए बस CSS :invalidचयनकर्ता का उपयोग करें।

input[type=number]:invalid {
    background-color: #FFCCCC;
}

जब भी एक गैर-संख्यात्मक मान्य दर्ज किया जाता है, तो यह आपके तत्व को लाल कर देगा।

के लिए ब्राउज़र समर्थन <input type='number'>उसी के बारे में है :invalid, इसलिए वहां कोई समस्या नहीं है।

:invalid यहाँ और अधिक पढ़ें ।

Comments

ओपेरा में काम नहीं करता है। यदि आप एक स्ट्रिंग इनपुट करते हैं तो भी यह मान्य है ।

— बरगी

ओपेरा .validityसंपत्ति का समर्थन करता है, लेकिन सही ढंग से संभाल नहीं करता है .valid?

— इयान बॉयड

यह करता है, लेकिन एक नंबर इनपुट कब अमान्य है ? यह सिर्फ उसी तरह काम करता है जैसे इनपुट खाली था। एक typeMismatchसमझ में आ सकता है, लेकिन यह केवल ईमेल या यूआरएल के प्रकार के लिए है ...

— बर्गी

@Bergi ऊपर दी गई तालिका उदाहरण देती है जहां संख्या इनपुट अमान्य हो सकते हैं: "q", "11" (तब अधिकतम 10 है), "0" (जब मिनट 1 है), "" (तब तत्व है required)

— इयान बॉयड

@ बर्गी .badInputको 11/20/2012 जोड़ा गया । लेकिन किसी को यह badInputदेखने के लिए नहीं देखना चाहिए कि क्या इनपुट वैध है; उन्हें देखना चाहिए .valid। यह संभव है (और सही) .badInputगलत होने के लिए , और अभी भी अमान्य इनपुट है। .validकिसी भी सत्यापन त्रुटियों (जैसे बेमेल, अतिप्रवाह, कमज़ोर) की अनुपस्थिति के रूप में परिभाषित किया गया है, जिनमें .badInputसे केवल एक प्रकार की त्रुटि है। ऊपर दिए गए चार्ट पर ध्यान दें कि .badInputगलत कहां है, लेकिन इनपुट अभी भी अमान्य है।

— इयान बॉयड

Answer 3

input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();

Comments

हर जगह: developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

— 23

फ़ायरफ़ॉक्स में काम नहीं करता है: Bugzilla.mozilla.org/show_bug.cgi?id=85686 (ध्यान दें कि यह बग 2001 में दायर किया गया था !!)

— ब्रैड कैंट

फ़ायरफ़ॉक्स, हमेशा की तरह, सही है। यह काम नहीं करना चाहिए और एक बग है

— vsync

Answer 4

उनके कुंजी कोड के आधार पर सभी दबाए गए कुंजियों को ट्रैक करें

मुझे लगता है कि कोई भी कीअप ईवेंट सुन सकता है और सभी पात्रों की एक सरणी रख सकता है, जो कि कीकोड पर आधारित है। लेकिन यह एक बहुत कठिन काम है और शायद कीड़े के लिए खतरा है।

http://unixpapa.com/js/key.html

इनपुट का चयन करें और एक स्ट्रिंग के रूप में चयन करें

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

<input type='number'>

सभी क्रेडिट: int32_t

Comments

वह समाधान कहीं और आजमाया गया, और काम नहीं किया । खासकर जब उन प्रेस Delete, Backspace, Ctrl+X, Ctrl+V, Right-click-cut, Right-click-paste।

— इयान बॉयड

मैं आपसे सहमत हूं, मूल रूप से ओपी ने जो पूछा है वह संभव नहीं है। हालांकि, दोनों हैक मैंने उल्लेख किया है (और वे हैक हैं, मैं इससे इनकार नहीं करता हूं) कुछ हद तक काम करते हैं। शायद वे किसी के लिए उपयोगी हो सकते हैं, किसी मामले में?

— सैंडस्ट्रॉम

आश्चर्यजनक रूप से, चयन कार्य काम करने लगता है। उस पद्धति की सीमा क्या है?

— njzk2

सीमाएं: पाठ नेत्रहीन रूप से चयनित है। यदि उपयोगकर्ता कुछ सामग्री टाइप करता है तो वह चलेगा

— fregante

लाइव डेमो के साथ संपादित जो दिखाता है कि यह विधि कितनी खराब है

— vsync