क्रोम टेक्स्ट इनपुट के "आकार" विशेषता को अनदेखा क्यों कर रहा है?

Question

नीचे दिए गए आकार विशेषता जो भी कोई प्रभाव नहीं है। क्यूं कर?

<input type="text" size="80" placeholder="blablabla bla lba bla bla bla blabla bla bla bla lba"> 

यह 60 वर्णों के लिए डिफ़ॉल्ट है और ऐसा कुछ भी नहीं है जो मैं इसे बदलने के लिए कर सकता हूं।

Answer 1

मुमकिन है आप कुछ इसे प्रभावित करने वाले स्टाइल है। किसी भी शैली के नियमों के बिना, यह works just fine है। लेकिन जब आप एक छोटे आकार के साथ शैली नियम लागू करते हैं, that takes precedence।

बाहर क्या शैली नियम यह प्रभावित कर रहा है पता करने के लिए, इस पर राइट क्लिक करें और "तत्व का निरीक्षण," तो दाईं ओर दिखाया गया स्टाइल जानकारी को देखो। , हालांकि पूरी तरह से संगत नहीं प्रतिपादन

<textarea cols="80" rows="1" style="overflow: visible" placeholder= 
"blablabla bla lba bla bla bla blabla bla bla bla lba"></textarea> 

यह अधिक सुसंगत निर्माण करता है:

Answer 2

input तत्व के बजाय एक textarea तत्व का प्रयोग करें। की स्थापना overflow: visible 80 अक्षर के लिए IE आरक्षित जगह बनाने के लिए नहीं है, अन्यथा केवल 79, फिट होगा ऊर्ध्वाधर स्क्रॉल पट्टी की वजह से।

क्यों समस्या input साथ प्रकट होता है:

विशेषता size="80" 80 अक्षर का "औसत" चौड़ाई के क्षेत्र के दृश्य चौड़ाई निर्धारित करता है। यह ठीक परिभाषित किया गया है नहीं (क्या "औसत"?), और ब्राउज़रों तो यह और भी असंगतता से लागू: size="80" 20 वर्ण की 4 बार डिफ़ॉल्ट चौड़ाई की तुलना में काफी कम चौड़ाई देने के लिए जाता है का उपयोग कर। तो ब्राउज़र भी सुसंगत नहीं है। अनुपात फ़ॉन्ट और ब्राउज़र पर निर्भर करता है।

(यह रूप में अच्छी तरह अन्य ब्राउज़रों पर होता है।) आप input का उपयोग कर रखने के लिए की जरूरत है:

आप style="width: 80ch" इस्तेमाल कर सकते हैं, लेकिन सभी ब्राउज़रों इस CSS3 सुविधा का समर्थन है, और कोई गारंटी नहीं है कि यह लागू किया गया है नहीं है अच्छी तरह। ch इकाई, अंकों शून्य के अग्रिम चौड़ाई परिभाषा से है '0' है, जो सबसे फोंट सामान्य रूप में अंकों की अग्रिम चौड़ाई के रूप में ही है। (जैसे, फ़ायरफ़ॉक्स लगभग सही ढंग से लागू करता है इस। लगभग है, लेकिन काफी नहीं।)

आप कुछ monospace फॉन्ट को <input> तत्वों में फ़ॉन्ट सेट कर सकते हैं। यह समस्या को नहीं हटाता है, लेकिन यह चौड़ाई निर्दिष्ट चौड़ाई के करीब बनाता है।

Answer 3

मैक ओएस शेर पर आंख मारना क्रोम 26 के रूप में, "ch" इकाई समर्थित नहीं है। एक तत्व इनलाइन शैली के साथ निरीक्षण किया पर "चौड़ाई: 16CH", शैली के रूप में "अवैध संपत्ति के मूल्य" चिह्नित है। अन्य आम इकाइयों (पीटी, पीएक्स, एम,%) ठीक स्वीकार कर रहे हैं।

Answer 4

आप सोच रहे हैं कि तुम क्यों 60 वर्ण लिख सकते हैं, संपत्ति है कि निर्धारित करता है कि कितने वर्ण maxlength कहा जाता है:

MaxLength

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

आकार केवल अक्षरों में चौड़ाई निर्धारित करता है, नहीं राशि उन डाल सकते हैं।

Answer 5

मुझे एक ही समस्या थी और कई अन्य समाधानों को आजमाने के बाद, मैंने इनपुट फ़ील्ड में चौड़ाई जोड़कर इसे ठीक किया।

input { 
    width:90px; /* Your width may vary */ 
}