💈 🚈 ⛹🏽 क्षेत्र विकास का ताओ 👩🏾‍🤝‍👨🏿 📀 👦🏻

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

कभी-कभी आप इसके बारे में भूल सकते हैं यदि इनपुट क्षेत्र का आकार ज्यादातर संतोषजनक प्रदान किया जाता है। 5 में से 3 ब्राउज़रों में आकार बदलने के लिए एक जगह होती है, जो कि लेआउट डिजाइनर, ऊपर से संकेत से स्तब्ध, कभी-कभी डिस्कनेक्ट करता है ( textarea {आकार: कोई नहीं} )। उपयोगकर्ता के लिए जीवन को कठिन बनाने के अन्य तरीके हैं। और फिर वह ~~छोड़ देता है,~~ स्क्रिप्ट और शैली लेता है।

कभी-कभी इनपुट फ़ील्ड को बढ़ाने के लिए मॉडरेशन की आवश्यकता होती है। उदाहरण के लिए, यदि यह विंडो की ऊंचाई या पृष्ठ लेआउट के तार्किक ब्लॉक का 80% तक पहुंच जाता है। इस चरम मामले पर भी ध्यान देने की आवश्यकता है, लेकिन अधिक बार पहली समस्या उत्पन्न होती है - खेत छोटे होते हैं।

कहानी

प्रसिद्ध समाचार साइट एक्स पर (नाम बदल दिए जाते हैं, संयोग यादृच्छिक होते हैं) इनपुट क्षेत्रों की परिवर्तनशीलता राजनीति से कम गंभीर रूप से दबा नहीं है। दमन बहुआयामी है, जैसे कि वे बैरिकेड के दूसरी तरफ, रेंगना आसान तरीकों से ठीक करने के लिए इसे मुश्किल बनाने की कोशिश करते हैं।

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

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

और फिर एक खोज हुई (लेआउट डिजाइनर - डिजाइनर ने इसके बारे में सपने में भी नहीं सोचा था), पत्र अनुभाग में परीक्षण किया गया:

textarea {height: 120px!important};

- ब्रावो! - बिग बॉस ने लेआउट डिजाइनर से कहा, - अच्छा हुआ, भाई, मदद की! अब वे हमारे साथ १२० पिक्सेल के भीतर नृत्य करेंगे! अब आप केवल कोने के चारों ओर इनपुट फ़ील्ड को खींचने और अपनी पसंद के अनुसार आकार बदलने के लिए केवल शैलियाँ नहीं कर सकते। अब वे 6 लाइनों पर पत्र लिखने की कोशिश करेंगे, और उत्तर, हमेशा की तरह - 3 लाइनों पर। हम उन्हें दिखाएंगे कि कैसे लेख लिखने के लिए नहीं है जो 400 पिक्सल के रूप में लेते हैं! (क्यों नहीं 800 और सामान्य तौर पर अभी भी इनपुट फ़ील्ड में कोई वृद्धि क्यों नहीं हुई है? हमारे एसईओ आपको यह समझाएंगे)

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

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

कार्यान्वयन

पाठ सामग्री के बढ़ने के साथ HabrAjax स्क्रिप्ट ऑटो-बढ़ते इनपुट फ़ील्ड के फ़ंक्शन के साथ पूरक थी । ऑटोरेक्शन को सचेत रूप से नहीं किया गया था, क्योंकि निचले दाएं कोने (ऑपरा को छोड़कर, जहां ऐसा कोई फ़ंक्शन नहीं है, लेकिन ऑटोरेक्शन को इसमें व्यवस्थित किया गया है) को छोड़कर, मैन्युअल रूप से इनपुट फ़ील्ड की ऊंचाई को समायोजित करना संभव है।

सैद्धांतिक रूप से, मैं लंबे समय से ऐसा करना चाहता था - खेतों के सीमित दायरे को देखने के लिए नहीं, लेकिन स्क्रिप्ट की 20 पंक्तियों को लिखने के लिए नहीं, यदि असुविधा 1 पंक्ति की शैलियों द्वारा हल की जाती है। इसलिए, 1.5-2 साल की लागत शैलियों और हाथों का आकार बदलती है। इसलिए, इसके अतिरिक्त अब 20 लाइनें नहीं हैं, लेकिन लगभग 7 पर्याप्त हैं, बाकी को अन्य प्रभावों के लिए खनन किया जाता है - अधिकतम ऊंचाई और स्क्रॉल की अनुपस्थिति जब इसकी आवश्यकता नहीं होती है, तो डोम की वास्तविकताएं। (कोड को पढ़ने के लिए अनुकूलित किया जाता है, उपयोगकर्ता स्क्रिप्ट की सटीक प्रतिलिपि नहीं।)

 var dQ = function(q){return document.querySelector(q);}; var win = typeof unsafeWindow !='undefined'? unsafeWindow: window; var tAGrow = function(tA){ //- if(!tA) return; var tSHPrev =0, tAInh, tATout maxH = Math.floor(win.innerHeight *0.8), tAF = function(ev){ if(tSHPrev < maxH && tAInh) clearTimeout(tATout), tA.style.overflow ='hidden', tAInh =0; var tSH = tA.scrollHeight - (isChrome?6:!isFx?win.opera?2:6:0); //  if(win.opera){ //   tA.blur(); tA.style.height = 0; tA.style.marginBottom = tSH +'px'; tSH = tA.scrollHeight -2; tA.style.height = tSH +'px'; tA.style.marginBottom = 0; tA.focus(); } if(tSHPrev <= tSH && tSHPrev < maxH){ tA.style.height = tSH +'px'; if(tSHPrev < maxH && tAInh) clearTimeout(tATout), tA.style.overflow ='hidden', tAInh =0; }else if(!tAInh) clearTimeout(tATout), tATout = setTimeout(function(){tA.style.overflow ='inherit'; tAInh =1}, 230); tSHPrev = tSH; }; tA.addEventListener('keypress',tAF,!1); //     tA.addEventListener('keyup',tAF,!1); tA.style.resize ='vertical'; //   (Fx, Chrome, Safari) tA.style.maxHeight = maxH +'px'; }; tAGrow(dQ('.editor #comment_text')||dQ('.editor #answer_text')||dQ('.editor #text_textarea') ); tAGrow(dQ('.editor #text') );

यह ज्ञात है कि यदि आप फ़ायरफ़ॉक्स / क्रोम / सफारी में सही टेक्स्ट ऊँचाई प्राप्त करने के लिए किसी अदृश्य स्थान पर एक इनपुट फ़ील्ड की नकल नहीं करते हैं, तो आप केवल इनपुट फ़ील्ड की ऊँचाई में वृद्धि को नोटिस करेंगे, कमी नहीं। इनपुट फ़ील्ड को कम करना अक्सर आवश्यक नहीं होता है, और यह कोने को खींचकर किया जा सकता है। इसलिए, समाधान जितना संभव हो उतना आलसी है, लेकिन यह संभवतः काफी सुविधाजनक होगा। किसी भी मामले में, इसे संशोधित या अक्षम किया जा सकता है।

व्यावहारिक पक्ष पर, मैं अधिकतम सरलता के सिद्धांत का पालन करने के लिए कठिनाइयों में नहीं जाना चाहता था। और इसलिए, मैनुअल फील्ड के आकार बदलने के साथ समस्याओं के विश्लेषण पर ~~ध्यान~~ देने के समय, ज्ञान में कमी आई, और ऑटोस्टैट का ताओ सीखा गया।

आप लेखक की कार्रवाई को देख सकते हैं और साइट पर इसका उपयोग हबराजैक्स उपयोगकर्ता स्क्रिप्ट संस्करण 0.87 या उच्चतर स्थापित करके कर सकते हैं।

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

UPD 02:00: ओपेरा में जाँच की गई - यह अभी तक स्वचालित रूप से ऊंचाई कम नहीं हुई है, लेकिन यह अगले अपडेट में तय किया जाएगा। कुछ समय के लिए ओपेरा (उदाहरण के लिए, यह 11.62 पर देखा गया था) स्क्रॉलहाइट के साथ IE को छोड़कर बाकी सभी की तरह व्यवहार किया गया - अब आप इससे पाठ की ऊंचाई का पता नहीं लगा सकते हैं!

UPD 06:00: - संस्करण 0.872 - स्क्रिप्ट पर सबसे छोटे लोड के रूप में ओपेरा के लिए ऑटो-रिडक्शन टेक्स्टारिया डाला। Habrahabr.ru/post/132872 में वर्णित विधि द्वारा बनाया गया है। यह स्क्रिप्ट और डीओएम को लोड करता है, जिसके कारण झिलमिलाहट प्रभाव और अन्य हो सकते हैं, इसलिए अन्य ब्राउज़र में ऑटो-कमी सक्षम नहीं है (यह बेहतर है यदि आप इसे 2 टेक्सारिया विधि का उपयोग करते हैं, जिसे लागू किया जाता है, जिस तरह से, हबरअजैक्स कोटेशन करेक्टर में - बढ़ते टेक्स्टारिया प्रासंगिक टिप्पणियाँ दर्ज करने के लिए चौड़ाई और ऊंचाई)।

इसे सफारी 5.1.4 विन + निंजाकिट में चेक किया गया है - वहां बड़े महत्वपूर्ण बग हैं - स्पेस में प्रवेश नहीं करना, एंटर करना, सेविंग सेटिंग्स और अन्य कमियों की संख्या नहीं है, इसलिए इसे अभी अनुशंसित नहीं किया गया है। सामान्य तौर पर, निंजाइट अब इस स्क्रिप्ट का समर्थन करने के लिए पर्याप्त नहीं है, और सबसे अच्छा समाधान एक अलग ऐड-ऑन है, जो कम संख्या में उपयोगकर्ताओं (संभावित 2-3 लोगों) के कारण अनुचित है।

क्षेत्र विकास का ताओ

कहानी

कार्यान्वयन

More articles: