👨🏿‍🚀 🧘🏽 🥙 पाठ में प्रवेश करते समय बनावट-परिवर्तन टेक्स्टरी ऊंचाई 🙎🏾 ♑️ 🔊

मैं आमतौर पर php में सर्वर-साइड प्रोग्रामिंग करता हूं, लेकिन समय-समय पर मैं बाहर जाता हूं और लेआउट, शैलियों और जावास्क्रिप्ट में तल्लीन करता हूं। हाल ही में, मुझे विभिन्न वस्तुओं पर टिप्पणियों में प्रवेश करते समय टेक्सटेरिया की ऊंचाई को बदलने का काम सौंपा गया था। इंटरनेट पर, इस बारे में बहुत सारी सामग्री नहीं थी, इसलिए कहने के लिए। पहली नज़र में, मैं Vkontakte, Facebook, MyKrug जैसे बड़े नेटवर्क में कार्यान्वित किए गए समाधानों पर पहुंच गया। हालांकि, निर्णय के दौरान क्रॉस-ब्राउज़र संगतता से कई बाधाएं और दूर थीं।

समाधान विकल्प अलग थे:
* स्क्रॉलहाइट और ऑफसेटहाइट गुणों पर भरोसा करें
* पाठ पार्स करके उपयोग की जाने वाली लाइनों की संख्या की गणना करें
* या ऊपर वर्णित नेटवर्क से विचार का उपयोग करें।

अंतिम विकल्प एक ऐसा समाधान था। एक अदृश्य परत (div) को textarea के लिए एक ही चौड़ाई, फ़ॉन्ट, फ़ॉन्ट आकार, इंडेंटेशन के साथ बनाया जाता है, फिर नए परिवर्तित पाठ को अदृश्य परत में कॉपी किया जाता है, परत की ऊंचाई को पहचाना जाता है और यह ऊंचाई textarea के लिए सेट की जाती है। यह सरल लगता है, लेकिन कार्यान्वयन की प्रक्रिया में कई नुकसान थे।
वर्तमान कार्यान्वयन प्रोटोटाइप संस्करण 1.7 का उपयोग करता है, लेकिन पहले के संस्करण समान होंगे (आप इसे JQuery से बदल सकते हैं या ढांचे को पूरी तरह से काट सकते हैं)।

<!doctype><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Auto-size TextArea Demo</title>
<script type="text/javascript" src="/js/prototype/prototype.js"></script><script>
function resizeArea(text_id, minHeight, maxHeight)
{
var area = $(text_id);
var area_hidden = $(text_id + "_hidden");
var text = '';
area.value.replace(/[<>]/g, '_').split("\n").each( function(s) {
text = text + '<div>' + s.replace(/\s\s/g, ' &nbsp;') + '&nbsp;</div>'+"\n";
} );
area_hidden.innerHTML = text;
var height = area_hidden.offsetHeight + 15;
height = Math.max(minHeight, height);
height = Math.min(maxHeight, height);
area.style.height = height + 'px';
}
</script><style>
body, textarea {
font-family: Tahoma, Arial, 'Nimbus Sans L', sans-serif;
font-size: 13px;
}
.text {
width:700px !important;
border:1px solid #000;
}
.text .textarea_behavior{
border:0;
width:99%;
word-wrap: break-word;
}
.text textarea{
overflow:hidden;
}
.text .comment_text_hidden{
position: relative;
}
.text #comment_text_hidden{
visibility:hidden;
position: absolute;
}
</style></head><body>
<div class="text">
<div class="comment_text_hidden"><div class="textarea_behavior" id="comment_text_hidden"></div></div>
<textarea class="textarea_behavior" rows="3" id="comment_text" onkeyup="resizeArea('comment_text', 45, 450);"></textarea>
</div>
</body></html>

समाधान किसी को बहुत कॉम्पैक्ट लग सकता है, जबकि अन्य पागलपन से बड़े होते हैं। एक बात यह सुनिश्चित करने के लिए है कि यह एकमात्र अंतिम संस्करण है जो मेरे लिए उपलब्ध सभी ब्राउज़रों (FF, Ch, Op, IE7-9) पर समान रूप से अच्छी तरह से काम करता है।

दृष्टिकोण की ख़ासियत क्या है: आप केवल textarea से नहीं पूछ सकते हैं कि पाठ कितना स्थान लेता है, इसलिए हम पाठ को वहां डालते हैं जहां आप यह पता लगा सकते हैं कि यह वास्तव में कितना लेता है (हमारे मामले में, केवल ऊंचाई दिलचस्प है)। यहाँ तो कई नुकसान हैं। टेक्सटेरिया से एक div में पाठ को कैसे रखा जाए, जिसमें टेक्स्ट के प्रकार और मात्रा, शब्द विच्छेद, टैग, कई रिक्त स्थान - सामान्य रूप से संरक्षित करने के लिए, सामान्य पाठ में दिखने वाली हर चीज html में नहीं लगती है। मैं सिर्फ पूर्व टैग का उपयोग नहीं कर सकता, क्योंकि उसका नामकरण कठिन था।

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

एक परत को कैसे छिपाएं ताकि यह अपने आकार और गुणों को बरकरार रखे। और आप प्रदर्शन नहीं कर सकते: कोई नहीं; - आयाम खो गए हैं। आप ब्लॉक को साइड में नहीं फेंक सकते (स्थिति: निरपेक्ष; बाएं: -50000px;), क्योंकि ब्लॉक का आकार निर्धारित नहीं किया जा सकता है, वे सम्मिलन के समय ज्ञात नहीं हैं। समाधान सार्वभौमिक होना चाहिए और आसानी से किसी भी पृष्ठ पर एम्बेड किया जाना चाहिए।
कई रिक्त स्थान और रिक्त लाइनों को बायपास करें।
पाठ की लंबाई को बदले बिना टैग से बच जाते हैं।
निरंतर पाठ लपेटें।

इन समस्याओं का हल कोड में अच्छी तरह से परिलक्षित होता है। परत textarea के बहुत करीब छिपी हुई है, इससे आप परत की चौड़ाई निर्धारित करने के बारे में नहीं सोच सकते हैं। कई स्थानों की एक पंक्ति को एक अंतर + & nbsp; से बदल दिया जाता है। खाली लाइनें - <div> & nbsp; </ div> (उपरोक्त सभी सामाजिक नेटवर्क उपयोग के लिए <br>, लेकिन मैं सफल नहीं हुआ)। टैग बहुत सरलता से बच जाते हैं: अक्षर <और> को _ द्वारा प्रतिस्थापित किया जाता है। खैर, मेरे लिए सबसे दिलचस्प खोज शब्द-आवरण शैलियों के साथ निरंतर पाठ का टूटना है: ब्रेक-वर्ड;
खैर, इस विचार में सबसे महत्वपूर्ण बात यह है कि परत और बनावट शैली के पूर्ण संयोग हैं।

अन्य दृष्टिकोणों का नुकसान

1. स्क्रॉलहाइट और ऑफसेटहाइट गुणों पर भरोसा करना पहला विकल्प है जिसे मैंने लागू किया है। सबकुछ ठीक हो जाएगा, लेकिन यहां textarea के आकार को कम करना संभव नहीं होगा।

2. पाठ को पार्स करके उपयोग की जाने वाली लाइनों की संख्या की गणना करें। दूसरा विकल्प। यह पहले से बेहतर है, लेकिन जैसा कि यह निकला, आप केवल टेक्स्टारिया में फ़ॉन्ट प्रकार मोनोस्पेस सेट करके इसका उपयोग कर सकते हैं, जहां सभी वर्ण समान चौड़ाई हैं। यह सामान्य सटीकता प्राप्त करने का एकमात्र तरीका है। हालांकि, यह डिजाइनरों के विचारों के विपरीत है ...

यहाँ जिज्ञासु के लिए कोड है (resizeArea फ़ंक्शन का हिस्सा):

var linecount = 1;
area.value.split("\n").each( function(s) {
linecount += Math.floor( s.length / cols ) + 1;
} )
area.rows = linecount;

हम लाइनों और प्लस लंबी लाइनों की गिनती करते हैं। आपको केवल कर्नल पैरामीटर को जानने की आवश्यकता है - यह ठीक वैसा ही है जैसा हम जानते हैं और मोनोपेस फ़ॉन्ट के बिना नहीं कर सकते। यदि हम W और i अक्षर की संख्या की तुलना करते हैं, तो लाइन में एक पूरी तरह से अलग संख्या शामिल है।

परिणाम

किए गए कार्य का परिणाम ऊपर दिया गया है। FF, Ch, Op, IE7-9 में काम करता है। मुझे उम्मीद है कि यह आपके लिए उपयोगी होगा। सभी प्रकार के विकल्पों को लागू करने के बाद, मैं वास्तव में सभी ब्राउज़रों के गिनी के लिए यूनिट परीक्षण करना चाहता था ...

दिलचस्प सामग्री

सीएसएस का उपयोग करके लंबे लिंक और निरंतर पाठ को स्थानांतरित करें
ऑटोसाइज़िंग टेक्स्टारिया
jQuery ऑटो करें

पाठ में प्रवेश करते समय बनावट-परिवर्तन टेक्स्टरी ऊंचाई

अन्य दृष्टिकोणों का नुकसान

परिणाम

दिलचस्प सामग्री

More articles: