Textarea आकार

मुझे कुछ टेक्स्ट दिखाने के लिए टेक्स्टरेरा का उपयोग करने की आवश्यकता है। समस्या यह है कि यदि मैं टेक्स्ट की 4-5 पंक्तियां रखता हूं तो एक स्क्रॉलबार दिखाई देगा। मैं सीएसएस/एचटीएमएल का उपयोग कैसे कर सकता हूं ताकि टेक्स्टरेरा उतनी बड़ी होगी जितनी सामग्री (कोई स्क्रॉलबार नहीं)।Textarea आकार

पाठ क्षेत्र इसे बदलने की जरूरत नहीं है आकार dynamicaly है, मैं इसे केवल एक पाठ को दिखाने के लिए उपयोग करें (मैं भी एक विकलांग पाठ क्षेत्र इस्तेमाल कर सकते हैं)
मैं पाठ क्षेत्र केवल verticaly फैलाने के लिए चाहते हैं।

आप जानना चाहते हैं:
मैं पाठ क्षेत्र का उपयोग किसी डेटाबेस से कुछ पाठ को दिखाने के लिए है, इसलिए जब पाठ क्षेत्र (उस में पाठ के साथ) बनाया जाता है, यह पूरे पाठ को एक बार में साथ दिखाना चाहिए कोई स्क्रॉलबार नहीं।

स्रोत

2011-04-02 Cristy

टेक्स्टरेरा का पूरा बिंदु उपयोगकर्ता को टेक्स्ट दर्ज करने देना है। यदि आप टेक्स्ट दिखाना चाहते हैं, उचित सेमेन्टिक्स (शायद div, p या pre) वाले तत्व का उपयोग करें। – Quentin

मुझे डर है कि आपको अपने टेक्स्टरेरा की ऊंचाई निर्धारित करने के लिए जावास्क्रिप्ट का सहारा लेना होगा। आप कुल ऊंचाई निर्धारित करने के लिए scrollHeight संपत्ति का उपयोग कर सकते हैं।

वैकल्पिक रूप से आप केवल div का उपयोग कर सकते हैं और टेक्स्टरेरा की तरह दिखने के लिए div शैली बना सकते हैं। div स्वचालित रूप से बढ़ेगा और चूंकि यह एक अक्षम टेक्स्टरेरा है, वैसे भी, आपको वास्तव में टेक्स्टरेरा होने की आवश्यकता नहीं है।

स्रोत

2011-04-02 12:46:45 jeroen

आप सीएसएस ऊंचाई का उपयोग कर सकते हैं: और चौड़ाई: विशेषताएं, ई। जी। <textarea style="width:400px;height:300px">...</textarea> जैसे कुछ, बस इच्छित आकारों का उपयोग करें।

इसके अतिरिक्त, यदि आप स्क्रॉलबार को दबाना चाहते हैं, तो overflow:hidden का उपयोग करें।

स्रोत

2011-04-02 12:41:52 addaleax

समस्या यह है कि दिखाए गए पाठ में परिवर्तनीय आकार है, इसलिए मैं "चौड़ाई: 300px;" नहीं कह सकता । एक textarea 200px tal हो सकता है और दूसरा 800px हो सकता है ... – Cristy

उस फ़ॉन्ट की ऊंचाई खोजें जो आप इसे प्रदर्शित करने की संभावना रखते हैं। मुझे सीएसएस/एचटीएमएल के बारे में निश्चित नहीं है लेकिन आप यह निर्धारित करने के लिए जावास्क्रिप्ट/PHP/ASP.net का उपयोग कर सकते हैं कि टेक्स्ट कितना बड़ा होगा पात्रों की संख्या के आधार पर। यदि आप इसे एक मोनोस्पेस्ड फ़ॉन्ट में करते हैं, तो यह और भी आसान होगा। टेक्स्ट क्षेत्र का उपयोग क्यों करें जब आप केवल एक लेबल का उपयोग कर सकें जो एक ही चीज़ को स्वयं ही करेगा?

स्रोत

2011-04-02 12:46:01 FreeSnow

मैं एक टेक्स्टरी का उपयोग करता हूं क्योंकि यह एक वेबसाइट है जिसे मैंने कुछ समय पहले बनाया है, और फिर मैंने इसे टेक्स्टरेरा का उपयोग करके किया, मैं इसे बदल नहीं सकता। मेरा मतलब है, जब आप एक div, span, div div-resizes में टाइप करते हैं। क्या मैं textarea में autoresize भी "सक्रिय" नहीं कर सकता?: डी – Cristy

ठीक है, प्रत्येक नियंत्रण अलग-अलग चीजों को करने के लिए किया जाता है। Textareas जानबूझकर बनाया जाता है ताकि वे आकार बदल नहीं सकते हैं। टेक्स्टरेरा का उपयोग करने के लिए आपको क्या कारण है? – FreeSnow

क्योंकि मैंने एक साल पहले एक वेबसाइट बनाई है, चलिए आप कुछ विज्ञापन (टेक्स्ट युक्त) जोड़ते हैं। उसके बाद मैंने इसे टेक्स्टरीज़ का उपयोग करके अलग कर दिया, और अब मैं थोड़ा सा तरीका बदलना चाहता हूं। मैं पहले से पोस्ट किए गए सभी विज्ञापनों से गुजरना नहीं चाहता हूं और एक div के साथ "textarea" को प्रतिस्थापित नहीं करना चाहता हूं। – Cristy

आप उपयोग कर जावास्क्रिप्ट आप निम्न लेख में से एक से दृष्टिकोण का उपयोग कर सकते हैं कोई आपत्ति नहीं है: http://james.padolsey.com/javascript/jquery-plugin-autoresize/ http://scvinodkumar.wordpress.com/2009/05/28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/

लेकिन अपने questing से मैं तुम्हें शुद्ध सीएसएस समाधान चाहते हैं मान। तो फिर तुम सरल div और निम्नलिखित सीएसएस का उपयोग कर (यदि आप केवल पाठ प्रदर्शित करना चाहते हैं) पाठ क्षेत्र का सिर्फ नकल appereance कर सकते हैं:

div { 
    cursor: text; 
    background: lightGray; 
    border: 1px solid gray; 
    font-family: monospace; 
    padding: 2px 0px 0px 2px; 
}

स्रोत

2011-04-02 12:49:16 Eskat0n

"खराब" पहले से ही किया जा चुका है। मैंने पहले बनाए गए पृष्ठों में टेक्स्टरेरा का उपयोग किया है और मैं पेज पर कुछ भी बदले बिना उन सभी को यह करना चाहता हूं, केवल सीएसएस फिल्मे – Cristy

बदलना सीएसएस (यहां तक कि CSS3 के साथ भी) के साथ असंभव है। आपको जावास्क्रिप्ट के छोटे टुकड़े का उपयोग करना होगा। – Eskat0n

ठीक है, मैं सिर्फ इस मिल गया है और यह बहुत अच्छी तरह से काम करता है:

<html> 
<head> 
<script> 
function textAreaAdjust(o) { 
    o.style.height = "1px"; 
    o.style.height = (25+o.scrollHeight)+"px"; 
} 
</script> 
</head> 
<body> 
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea> 
</body> 
</html>

अब, मुझे यह नहीं मानना चाहिए कि आप जावास्क्रिप्ट जानते हैं (लेकिन आप शायद)।

बस चलाने

textAreaAdjust(document.getElementById("id of your text area"))

कुछ इस तरह काम करना चाहिए। मैं जावास्क्रिप्ट के साथ सबसे अच्छा नहीं हूं (यहां तक कि करीब भी नहीं, मैंने इसे दूसरे दिन इस्तेमाल करना शुरू किया)

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

स्रोत

2011-04-02 12:56:24 FreeSnow

मुझे जावास्क्रिप्ट पता है लेकिन मैं इसे यहां उपयोग नहीं करना चाहता हूं। साथ ही, मैंने कहा कि टेक्स्टरेरा को संपादन योग्य नहीं होना चाहिए, या इसमें लिखते समय इसका आकार बदलना नहीं है। स्क्रॉलबार के बिना इसे केवल पूरे टेक्स्ट को दिखाने की आवश्यकता है (जब पृष्ठ लोड होता है)। – Cristy

मुझे सी ++ पता है, मैं उस मैक्रो को भी बना सकता हूं लेकिन ... मजेदार कहां है? एक्सडी – Cristy

बहुत सारे और बहुत सारे। एक हैक अप चीज के साथ काम करने के बजाय एक स्वच्छ लिखित साइट बनाना बेहतर है। विशेष रूप से ग्राहकों से निपटने के दौरान। – FreeSnow

मुझे लगता है कि name विशेषता का उपयोग नहीं किया जाता है।

http://jsfiddle.net/JeaffreyGilbert/T3eke/

स्रोत

2011-04-02 14:11:05

Wtf? हर बार जब मैं div में प्रवेश करता हूं, तो कुछ अजीब होता है :)) यह उस के अंदर एक और div बनाता है। – Cristy

http://jsfiddle.net/JeaffreyGilbert/T3eke/1/ –

<!DOCTYPE html> 
<html> 
<head> 
<title>autoresizing textarea</title> 
<style type="text/css"> 
textarea { 
    border: 0 none white; 
    overflow-y: auto; 
    padding: 0; 
    outline: none; 
    background-color: #D0D0D0; 
    resize: none; 
} 
</style> 
<script type="text/javascript"> 
var observe; 
if (window.attachEvent) { 
    observe = function (element, event, handler) { 
     element.attachEvent('on'+event, handler); 
    }; 
} 
else { 
    observe = function (element, event, handler) { 
     element.addEventListener(event, handler, false); 
    }; 
} 
function init (maxH) { 
     var text = document.getElementById('text'); 
    var maxHeight=maxH; 
    var oldHeight= text.scrollHeight; 
    var newHeight; 
    function resize() { 

    text.style.height = 'auto'; 
    newHeight= text.scrollHeight; 
    if(newHeight>oldHeight && newHeight>maxHeight ) 
    { 
     text.style.height=oldHeight+'px'; 

    } 
    else{ 
     text.style.height = newHeight+'px'; 
     oldHeight= text.scrollHeight; 
    } 

    } 
    /* 0-timeout to get the already changed text */ 
    function delayedResize() { 
     window.setTimeout(resize, 0); 
    } 
    observe(text, 'change', resize); 
    observe(text, 'cut',  delayedResize); 
    observe(text, 'paste', delayedResize); 
    observe(text, 'drop', delayedResize); 
    observe(text, 'keydown', delayedResize); 

    text.focus(); 
    text.select(); 
    resize(); 
} 
</script> 
</head> 
<body onload="init(200);"> 
<textarea rows="1" style="height:1em;" id="text"></textarea> 
</body> 
</html>

http://jsfiddle.net/TDAcr/

स्रोत

2012-10-13 17:39:38

शानदार, अमीन! मुझे लगता है कि मैंने इसे ढूंढकर इंटरनेट पर सोना मारा है। आप चार से अधिक वोटों के लायक हैं, लेकिन मेरे पास केवल एक वोट है जो मैं आपको दे सकता हूं। – Charlesism

आप पाठ क्षेत्र की तरह div उपयोग कर सकते हैं: आप इस विकल्प (एचटीएमएल 5) का उपयोग कर सकते हैं।

<div contenteditable="true" style="width:250px; border:1px solid #777" ></div

स्रोत

2013-11-02 11:03:38 Guwanch

resize property का उपयोग करते हुए इन दिनों काम करता है:: यह इस तरह संभव है

आकार: कोई नहीं;

स्रोत

2014-01-27 19:31:19

Textarea आकार

उत्तर

संबंधित मुद्दे