scrollHeight प्रोग्रामेटिक रूप से बदलती सामग्री के बाद रीसेट नहीं कर रहा है - जावास्क्रिप्ट, आकार बदलें, उपयोगकर्ता-इनपुट

मैं jQuery के बिना कुछ चीजें सीखने की कोशिश कर रहा हूं। यहां उन चुनौतियों में से एक है जिसका मैं सामना कर रहा हूं।

मेरे पास एक तय है contenteditable div कि div को पाठ जोड़ने पर, अगर scrollHeight से अधिक है clientHeight जब तक सामग्री div को फिट नहीं करता तब तक मैं फ़ॉन्ट को छोटा करता हूं।

कभी-कभी मैं उस टेक्स्ट को "पुनर्निर्माण" करता हूं जो प्रतिस्थापित करता है innerHTML प्रोग्राम के रूप में। या उपयोगकर्ता पाठ को हटा सकता है चाहिए घटाएं scrollHeight, लेकिन दोनों मामलों में, scrollHeight अधिकतम मूल्य बनी हुई है। मुझे फिर से div को "फिट" करने के लिए फ़ॉन्ट आकार बढ़ाने के लिए कुछ तरीका चाहिए। (वह आदर्श रूप से "टी महंगा नहीं है)

उदाहरण:

मेरे clientHeight = 142, और scrollHeight = 158. एक लूप फ़ॉन्ट आकार को तब तक कम कर देता है scrollHeight 142 है फिर, उपयोगकर्ता पाठ की एक पंक्ति हटा देता है, लेकिन scrollHeight अभी भी 142 है, कोई बदलाव नहीं है।

ऊंचाई को कम करने / बढ़ाने के लिए कोड:

    var textBox = document.getElementById("text");
var current, min = 6, max = 14;
current = textBox.style.fontSize.substr(0, textBox.style.fontSize.length - 2);
current = parseInt(current);
if (textBox.clientHeight < textBox.scrollHeight) {
while (textBox.clientHeight < textBox.scrollHeight) {
current--;
if (current < min) break;
textBox.style.fontSize = "" + current + "pt";
}
} else if (textBox.clientHeight > textBox.scrollHeight) {
while (textBox.clientHeight > textBox.scrollHeight) {
current++;
if (current > max) break;
textBox.style.fontSize = "" + current + "pt";
}
}

एचटीएमएल (इसे मायने रखता है):

<div id="text" contenteditable="true"></div>

सीएसएस (इसे मायने रखता है):

#text {
position: relative;
border: 1px solid blue;
top: 180px;
left: 31px;
width: 300px;
height: 132px;
padding: 5px;
font-family: "mplantin";
font-size: 14pt;
font-weight: 200;
}

उत्तर:

जवाब के लिए 3 № 1

मैं एक ही नाव पर था, लेकिन एक के साथ iframe; मुझे यकीन नहीं है कि मेरा समाधान आपकी चैट विंडो के अनुकूल है क्योंकि यह पेज संक्रमण के लिए है, लेकिन कुछ परीक्षणों के बाद यह मेरा हैक है। "content" एक की आईडी है iframe और इसे जावास्क्रिप्ट फ़ंक्शन के अंदर निष्पादित किया जाता है जिसे पृष्ठ परिवर्तन की आवश्यकता होती है:

var c=document.getElementById("content");
c.width=0;
c.height=0;
c.src="page.html";

`src" असाइनमेंट विधि मानों को फैलाती हैवांछित परिणाम प्राप्त करने के बाद, 0 पर सही सेट करें; आपके लिए एक टेक्स्ट क्षेत्र को फिर से आकार देने का एक तरीका हो सकता है; हालांकि, मेरे पास आपके साथ दृश्य समस्याएं थीं; मैं टाइमर का उपयोग कर समाप्त हुआ ताकि परिवर्तन हो सके जबकि पृष्ठों के बीच संक्रमण पारदर्शी था।


उत्तर № 2 के लिए 1

यह मेरी समस्या को ठीक करने लग रहा था:

element.style.height = "auto";

उत्तर № 3 के लिए 1

@nixahn और @jeff दोनों के जवाब मेरे लिए काम कर रहे हैं (क्रोम, एफएफ)

iframe.style.height ="0"; // or "auto"
iframe.contentWindow.document.open();
iframe.contentWindow.document.write("<style>"+css+"</style>");
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

संबंधित सवाल
सबसे लोकप्रिय