टेक्स्टरेरा

Question

के अंदर पाठ की ऊंचाई कैसे प्राप्त करें मेरे पास टेक्स्ट Hello World के साथ है। मैं इस पाठ की ऊंचाई प्राप्त करना चाहता हूं।

मैं उपयोग करने के लिए कोशिश की है:

var element = document.getElementById('textarea'); 
var textHeight = element.innerHTML.offsetHeight; 

और:

var textHeight = element.value.offsetHeight; 

लेकिन इन पाठ की संख्या है, लेकिन textarea तत्व की ऊंचाई देना नहीं है।

Answer 1

एक अवधि तत्व बनाएं, स्पैन के आंतरिक HTML को "हैलो वर्ल्ड" पर सेट करें।
अवधि का ऑफ़सेट प्राप्त करें।

var span = document.createElement("span"); 
span.innerHTML="Hello World"; //or whatever string you want. 
span.offsetHeight // this is the answer 

ध्यान दें कि आपको स्पैन की फ़ॉन्ट शैली को टेक्स्टरेरा की फ़ॉन्ट शैली में सेट करना होगा।

आपका उदाहरण कभी काम नहीं करेगा क्योंकि आंतरिक HTML और मान दोनों तार हैं। स्ट्रिंग ऑफसेट को परिभाषित नहीं करता है।

यदि आप टेक्स्टरेरा के अंदर चयनित टेक्स्ट की ऊंचाई प्राप्त करना चाहते हैं, तो टेक्स्टटेरा के चयनित टेक्स्ट को खोजने के लिए चयन स्टार्ट/चयन एंड का उपयोग करें।

Answer 2

http://www.quirksmode.org/dom/range_intro.html क्षमा करें कि मैं और अधिक सहायता नहीं कर सकता।

आपके साथ समस्या उदाहरण है कि इनलाइन टेक्स्ट की ऊंचाई नहीं है, इसकी ऊंचाई केवल ऊंचाई है, क्योंकि इसकी ऊंचाई ऊंचाई ब्लॉक मोड में होने की आवश्यकता है, ताकि सभी लाइनों को जोड़ा जा सके पाठ का एक ब्लॉक, फिर भी यह सब बॉक्स की चौड़ाई और फ़ॉन्ट आकार, फ़ॉन्ट-परिवार इत्यादि पर निर्भर करता है

क्या इट्ज़वार्टी सुझाव देता है कि टेक्स्ट चयन प्राप्त हो रहा है और इसे एक div में डाला जा रहा है जिसमें एक ही फ़ॉन्ट है और textarea के रूप में चौड़ाई, जिसमें ब्लॉक ब्लॉक है और आपको इसकी ऊंचाई प्राप्त करने की अनुमति देता है।

Answer 3

element.scrollHeight शायद जांच के लायक है।

अगर मैं इस तक पहुंचने जा रहा था (और मैंने इसका परीक्षण नहीं किया है), तो मैं टेक्स्टरेरा की ऊंचाई को स्क्रॉल ऊंचाई मापने के लिए 1px सेट कर दूंगा और फिर टेक्स्टरेरा की ऊंचाई को रीसेट कर दूंगा।

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

Answer 4

jQuery में कोई scrollHeight है, इसलिए यह एक छोटे से वैकल्पिक हल की जरूरत है। समाधान होगा:

var areaheight=$("textarea#element")[0].scrollHeight; 
$("#element").height(areaheight); 

या कम:

$("#element").height($("#element")[0].scrollHeight) 

Answer 5

मुझे यकीन है कि मैं सही ढंग से अपने प्रश्न की व्याख्या है कि क्या नहीं हूँ, लेकिन मैं व्यक्तिगत रूप से पाठ की प्रत्येक पंक्ति के सटीक ऊंचाई पता करने के लिए की जरूरत है। line-height संपत्ति का सही मूल्य नहीं है (उदाहरण के लिए, सफारी में, यह वास्तव में टेक्स्ट प्रिंट करते समय निकटतम मूल्य पर गोल किया जाएगा)।

यह मेरा कामकाज है। दस्तावेज़ की शुरुआत में आपके पास निम्न कोड होना चाहिए।

// set one row in the textarea and get its height 
element.rows = 1; 
var height1 = parseFloat(window.getComputedStyle(element)["height"]); 
// set two rows in the textarea and get its height 
element.rows = 2; 
var height2 = parseFloat(window.getComputedStyle(element)["height"]); 
// Now, the line height should be the difference 
var inputLineHeight = height2-height1; 

परिवर्तनीय inputLineHeight में पिक्सेल में सही मान होना चाहिए।

Answer 6

आप element.scrollHeight (जैसे पैट्रिक जवाब) का उपयोग कर सकते हैं लेकिन यह कुछ सुधार (मैं उदाहरण में jQuery का उपयोग कर रहा) की जरूरत है:

1) यदि आपके पाठ क्षेत्र गद्दी है, तो आप इसे घटाना करने के लिए की जरूरत है (ऊपर & नीचे)।

2) यदि तत्व पहले से ही ऊंचाई की स्थापना की है, तो आप फिर इसे वापस सेट शून्य (बस उपाय के लिए करने के लिए यह निर्धारित करने की आवश्यकता है, और यह इस ऊंचाई + गद्दी)

var h0 = $(element).height(); // backup height 
$(this).height(0); 
var h = $(this).get(0).scrollHeight - $(this).css('paddingTop').replace('px','')*1 - $(this).css('paddingBottom').replace('px','')*1; // actual text height 
$(this).height(h0); // set back original height (or new height using h) 

अतिरिक्त की कोई जरूरत नहीं है देता है Textarea के रूप में एक ही सीएसएस के साथ अवधि।