इनपुट प्रकार "संख्या" का आकार परिवर्तन नहीं होगा

Question

जब मैं टाइप बदलता हूं तो मेरा इनपुट आकार परिवर्तन क्यों नहीं करेगा, type="number"लेकिन यह किसके साथ काम करता है type="text"?

उदाहरण

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">

Answer 1

ऐसा लगता है कि inputप्रकार विशेषता का numberसमर्थन नहीं करता sizeहै या यह ब्राउज़रों के साथ संगत नहीं है, आप इसे सीएसएस के माध्यम से सेट कर सकते हैं:

input[type=number]{
    width: 80px;
} 

अपडेटेड फ़िडल

Comments

अति उत्कृष्ट! यह काम करता है। इसके अलावा एक और छोटी सी बात जो मैंने अभी देखी है। संख्या प्रकार भी पाठ की अधिकतम सीमा की अनुमति नहीं देता है जहाँ पाठ करता है। क्या इसे ठीक करने का कोई तरीका है?

— शनिवार १। ’१14 को १urn:१ye

यह इसका समर्थन करता है, आप यहां सभी समर्थित मूल्य देख सकते हैं: w3.org/TR/html-markup/input.number.html

— फेलिक्स

मुझे मिल गया है maxlength="4"और यह प्रभावी नहीं हो रहा है, जैसा कि यह हैtext

— SaturnsEye

ओह, maxlengthसमर्थन नहीं करता है, केवल maxविशेषता।

— फेलिक्स

यदि आप विशिष्ट आकारों के उपयोग को लक्षित करना चाहते हैं: input[type=number][size="3"]{ width: 3em; }आदि

— निक

Answer 2

गलत उपयोग।

इनपुट प्रकार संख्या यह तीर और ऊपर के माध्यम से चयन करने योग्य मूल्य है।

तो मूल रूप से आप "चौड़ाई" सीएसएस शैली की तलाश कर रहे हैं।

इनपुट टेक्स्ट को ऐतिहासिक रूप से मोनोपॉज फ़ॉन्ट के साथ स्वरूपित किया गया है, इसलिए इसका आकार भी इसकी चौड़ाई है।

इनपुट नंबर यह नया है और "आकार" संपत्ति का कोई मतलब नहीं है *। एक विशिष्ट उपयोग:

<input type="number" name="quantity" min="1" max="5">

w3c डॉक्स

ठीक करने के लिए, एक शैली जोड़ें:

<input type="number" name="email" style="width: 7em">

EDIT: यदि आप एक रेंज चाहते हैं, तो आपको सेट करना होगा type="range"और नहीं="number"

EDIT2: * आकार एक अनुमत मान नहीं है (इसलिए, कोई मतलब नहीं)। आधिकारिक W3C विनिर्देशों की जाँच करें

नोट: आकार विशेषता निम्नलिखित इनपुट प्रकारों के साथ काम करती है: पाठ, खोज, टेल, यूआरएल, ईमेल और पासवर्ड।

युक्ति: तत्व में अनुमत अधिकतम वर्णों को निर्दिष्ट करने के लिए, अधिकतम गति का उपयोग करें।

Comments

संख्याओं में आकार का कहना है कि "इसका कोई उपयोग नहीं है" एक खिंचाव है। यदि आपके पास 2 से 4 के बीच सामान्य मानों के साथ एक नंबर इनपुट है (जो कि बहुत सामान्य है) तो आपके पास मानक आकार को नियंत्रित करने का कोई तरीका नहीं है और पूरी चीज विशाल है। इनपुट्स को कभी कोई प्यार नहीं मिलता, ऐसा लगता है ... इसलिए "समाधान" सिर्फ पाठ का उपयोग कर रहा है, भले ही आप वास्तव में केवल संख्या चाहते हैं। प्रत्येक पृष्ठ का डिज़ाइन सभी इनपुट को एक विशाल चौड़ाई बनाने के लिए आधारित नहीं है और सभी नंबर इनपुट की चौड़ाई को निर्दिष्ट करने के लिए एक प्रतिगमन है।

— फोर्ट

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

— चालीस

मुद्दा यह है कि आकार को हटाने के लिए यह बेवकूफी थी, ऐसा इसलिए नहीं था क्योंकि "इसका कोई उपयोग नहीं है"।

— चालीस

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

— चालीस

शानदार फिक्स, style='width:80'बहुत बहुत धन्यवाद

— फटी

Answer 3

लंबाई सेट करने के बजाय, संख्या इनपुट के लिए अधिकतम और न्यूनतम मान सेट करें।

इनपुट बॉक्स फिर सबसे लंबे समय तक वैध मूल्य के लिए आकार बदलता है।

यदि आप 3 अंकों की संख्या की अनुमति देना चाहते हैं तो 999 को अधिकतम के रूप में सेट करें

 <input type="number" name="quantity" min="0" max="999">

Comments

यह एकमात्र तरीका था जो मुझे एंड्रॉइड पर मोबाइल क्रोम के लिए काम करने के लिए मिल सकता था।

— रैन बसेरा

Answer 4

के लिए <input type=number>, एचटीएमएल 5 सीआर द्वारा, sizeविशेषता अनुमति नहीं है। हालाँकि, अप्रचलित सुविधाओं में यह कहता है: "लेखक को इस विनिर्देश में कहीं और आवश्यकताओं के विपरीत नहीं होना चाहिए, लेकिन इनपुट तत्वों पर अधिकतम गति और आकार विशेषताओं को निर्दिष्ट करें जिनके प्रकार संख्या स्थिति में हैं। इन विशेषताओं का उपयोग न करने का एक वैध कारण यह है कि विरासत के उन उपयोगकर्ता एजेंटों की मदद करना जो टाइप = "संख्या" के साथ इनपुट तत्वों का समर्थन नहीं करते हैं, फिर भी एक उपयोगी चौड़ाई के साथ पाठ क्षेत्र को प्रस्तुत करना है। "

इस प्रकार, sizeविशेषता इस्तेमाल किया जा सकता, लेकिन यह केवल पुराने ब्राउज़र है कि समर्थन नहीं करते प्रभावित करता है type=numberताकि तत्व, वापस एक साधारण पाठ नियंत्रण पर गिर जाता है, <input type=text>।

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

निष्कर्ष यह है कि आपको <input type=number>अधिक या कम द्रव सेटअप में उपयोग करना चाहिए जो तत्व के आयामों के बारे में कोई धारणा नहीं बनाता है।

Answer 5

तुम जो चाहते हो maxlength।

मान्य के लिए text, search, url, tel, email, और password, यह वर्णों की अधिकतम संख्या को परिभाषित करता है (UTF-16 कोड इकाइयों के रूप में) उपयोगकर्ता क्षेत्र में प्रवेश कर सकते हैं। यह पूर्णांक मान 0 या उच्चतर होना चाहिए। यदि कोई अधिकतम गति निर्दिष्ट नहीं है, या एक अमान्य मान निर्दिष्ट है, तो फ़ील्ड की अधिकतम लंबाई नहीं है। यह मान भी न्यूनतम या उससे अधिक के बराबर होना चाहिए।

आप इनमें से किसी एक inputप्रकार का उपयोग करने पर विचार कर सकते हैं।

Answer 6

Onkeypress घटना पर एक का उपयोग करें। एक ज़िप कोड बॉक्स के लिए उदाहरण। यह अधिकतम 5 वर्णों की अनुमति देता है, और यह सुनिश्चित करने के लिए जांचता है कि इनपुट केवल संख्या है।

कुछ भी नहीं बेशक एक सर्वर साइड सत्यापन धड़कता है, लेकिन यह जाने का एक निफ्टी तरीका है।

function validInput(e) {
  e = (e) ? e : window.event;
  a = document.getElementById('zip-code');
  cPress = (e.which) ? e.which : e.keyCode;

  if (cPress > 31 && (cPress < 48 || cPress > 57)) {
    return false;
  } else if (a.value.length >= 5) {
    return false;
  }

  return true;
}

#zip-code {
  overflow: hidden;
  width: 60px;
}

<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required">

Answer 7

change type = "number" टाइप करने के लिए = "tel"