एक रबर टेक्स्ट बॉक्स ट्यूनिंग

मुझे लगता है कि कई टाइपसेटर्स (और न केवल) को टेक्स्ट फ़ील्ड टाइप करना था (<इनपुट टाइप = "टेक्स्ट" />), उन्हें मनमाना आकार देते हुए। लेकिन इस तत्व को रबर कैसे बनाया जाए और शर्तों को पूरा करें:

1. पाठ के किसी भी क्षैतिज और ऊर्ध्वाधर इंडेंटेशन को सेट करने की क्षमता;
2. तत्व को पूरे कंटेनर पर कब्जा करना होगा जिसमें इसे रखा गया है;
3. टेक्स्ट फ़ील्ड में कहीं भी माउस क्लिक करने से कर्सर सेट हो जाता है।

उत्तर काफी सरल है और निम्नलिखित विधि द्वारा हल किया गया है:

आरंभ करने के लिए, आपको यह समझने की आवश्यकता है कि इनपुट तत्व का क्या होता है जब इसकी चौड़ाई 100% निर्धारित की जाती है और पाठ के लिए बाईं और दाईं ओर इंडेंट जोड़ते हैं।

सीएसएस मानकों के अनुसार (और इस मामले में सभी ब्राउज़र उनका समर्थन करते हैं), परिणामस्वरूप इनपुट तत्व की चौड़ाई, सीमाओं ( सीमा ) और बाहरी खरोज फ़ील्ड ( मार्जिन ) के बराबर होगा:



चौड़ाई = चौड़ाई + पेडिंग-लेफ्ट + पेडिंग-राइट



यानी यह आंतरिक क्षैतिज मार्जिन की मात्रा से बड़ा होगा, और परिणामस्वरूप तत्व इसके लिए आवंटित क्षेत्र से आगे निकल जाएगा।

ताकि कुल चौड़ाई 100% हो, आप दो कंटेनरों की एक प्रणाली का उपयोग कर सकते हैं:

		 <div class = "input-width"> <div class = "चौड़ाई-सेटर"> <input type = "text" value = "" /> <div> </ div> 

प्रत्येक कंटेनर अपनी भूमिका निभाता है:

1. इनपुट-चौड़ाई - यह कंटेनर टेक्स्ट फ़ील्ड की परिणामी चौड़ाई सेट करता है;
2. चौड़ाई-सेटर - यह कंटेनर इनपुट तत्व की चौड़ाई को कम करता है जो क्षैतिज आंतरिक संकेतक है।

यहाँ शैलियों का एक सेट है जो इस डिज़ाइन को स्पष्ट करेगा:

	 .input-चौड़ाई {
		 ऊंचाई: 23 पीएक्स;
		 बॉर्डर: 1px ठोस # 999;
		 पृष्ठभूमि: #fff;
	 }
	 रिसीवर-सेटर {
		 ऊंचाई: 23 पीएक्स;
		 मार्जिन: 0 9px;
	 }
	 इनवॉइस-सेटर इनपुट।
		 चौड़ाई: 100%;
		 ऊंचाई: 14 पीएक्स;
		 गद्दी: 4px 9px 5px;
		 मार्जिन: 0;
		 फ़ॉन्ट-परिवार: ताहोमा, जेनेवा, संस-सेरिफ़;
		 फ़ॉन्ट-आकार: 12 पीएक्स;
		 लाइन-ऊँचाई: 14px;
		 रंग: # 000;
		 सीमा: 0 कोई नहीं;
		 पृष्ठभूमि: # 9C6;
	 }
		

उदाहरण 1



शैलियों से, यह पता चलता है कि इनपुट-चौड़ाई तत्व उस चौड़ाई को सेट करता है जिसे पाठ क्षेत्र पर कब्जा करना चाहिए। चौड़ाई-सेटर तत्व क्षैतिज इंडेंटेशन से कम इनपुट तत्व की चौड़ाई निर्धारित करता है। यह ध्यान देने योग्य है कि उसकी बाहरी मार्जिन इनपुट तत्व के लिए मार्जिन पैडिंग-लेफ्ट और पेडिंग-राइट के बराबर होना चाहिए।

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

कंटेनरों के प्रारंभिक सेट को नए तरीके से वर्णन करते हैं:

	 .input-चौड़ाई {
		 ऊंचाई: 23 पीएक्स;
		 बॉर्डर: 1px ठोस # 999;
		 पृष्ठभूमि: #fff;
	 }
	 रिसीवर-सेटर {
		 ऊंचाई: 23 पीएक्स;
		 मार्जिन: 0 9px;
		 स्थिति: रिश्तेदार;
	 }
	 इनवॉइस-सेटर इनपुट।
		 चौड़ाई: 100%;
		 ऊंचाई: 14 पीएक्स;
		 गद्दी: 4px 9px 5px;
		 मार्जिन: 0;
		 फ़ॉन्ट-परिवार: ताहोमा, जेनेवा, संस-सेरिफ़;
		 फ़ॉन्ट-आकार: 12 पीएक्स;
		 लाइन-ऊँचाई: 14px;
		 रंग: # 000;
		 सीमा: 0 कोई नहीं;
		 पृष्ठभूमि: # 9C6;
		 स्थिति: निरपेक्ष;
		 बाएं: -9 पीएक्स;
		 शीर्ष: 0;
	 } 

उदाहरण 2



नतीजतन, इस तरह की शैलियों को लागू करते समय, शुरुआत में निर्धारित कार्यों को पूरा किया जाता है। पाठ क्षेत्र निर्दिष्ट इंडेंटेशन रबर के साथ निकला और किसी भी स्थान पर क्लिक करने योग्य है।

परिणामी तत्व के लिए एक विशिष्ट चौड़ाई निर्धारित करने के लिए, आपको केवल इनपुट-चौड़ाई कंटेनर के लिए चौड़ाई गुण सेट करने की आवश्यकता है।



नोट। उपरोक्त रबर टेक्स्ट फ़ील्ड कार्यान्वयन पद्धति का परीक्षण Doctype: HTML 4.01, XHTML 1.0 और HTML (HTML 5) पर किया गया है और इसमें क्रॉस-ब्राउज़र संगतता है: IE6-8, ओपेरा 9+, FF 2.0+, Safary 2.0+, Chrome। Doctype की अनुपस्थिति में, क्रॉस-ब्राउज़र विधि प्रदर्शन की गारंटी नहीं है।