प्रोटोटाइप का उपयोग करके एक टेक्सटारिया को ऑटोसेज़ कैसे करें?


121

मैं वर्तमान में जिस कंपनी के लिए काम करता हूं, उसके लिए मैं एक आंतरिक बिक्री एप्लिकेशन पर काम कर रहा हूं, और मुझे एक फॉर्म मिला है जो उपयोगकर्ता को डिलीवरी पते को बदलने की अनुमति देता है।

अब मुझे लगता है कि यह बहुत अच्छा लग रहा है, अगर मैं मुख्य पते के विवरण के लिए उपयोग किए जाने वाले textarea बस इसमें पाठ के क्षेत्र को ले लूंगा, और यदि पाठ बदल गया था तो स्वचालित रूप से आकार बदल जाएगा।

यहाँ इसका एक स्क्रीनशॉट वर्तमान में है।

आईएसओ पता

कोई विचार?


@Chris

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

मैं फ़ॉन्ट को कम कर सकता हूं, लेकिन मुझे बड़े और पठनीय होने के लिए पते की आवश्यकता है। अब मैं पाठ क्षेत्र के आकार को कम कर सकता हूं, लेकिन फिर मुझे उन लोगों के साथ समस्या है जिनके पास एक पता पंक्ति है जो 3 या 4 (एक 5 लेता है) लाइनें लेता है। उपयोगकर्ता को स्क्रॉलबार का उपयोग करने की आवश्यकता एक प्रमुख संख्या है।

मुझे लगता है कि मुझे थोड़ा और विशिष्ट होना चाहिए। मैं ऊर्ध्वाधर आकार के बाद हूँ, और चौड़ाई उतनी मायने नहीं रखती। एकमात्र समस्या जो इसके साथ होती है, वह है आईएसओ नंबर (बड़ी "1") पता के नीचे धकेल दिया जाता है जब खिड़की की चौड़ाई बहुत छोटी होती है (जैसा कि आप स्क्रीनशॉट पर देख सकते हैं)।

यह एक नौटंकी होने के बारे में नहीं है; यह एक टेक्स्ट फ़ील्ड के बारे में है जिसे उपयोगकर्ता संपादित कर सकता है जो अनावश्यक स्थान नहीं लेगा, लेकिन इसमें सभी पाठ दिखाएंगे।

हालांकि अगर कोई व्यक्ति मेरे पास आने वाली समस्या के लिए एक और तरीका भी अपनाता है।


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

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};

क्या आप एक डेमो साइट बना सकते हैं जहाँ हम इसे काम पर देख सकते हैं?
एफिन 12lafsson

3
यह प्लगइन अच्छा लगता है jacklmoore.com/autosize
गौरव शाह

क्या कोई JQuery का वचन है? JQuery में एक TextArea के कॉल और पंक्तियों का उपयोग कैसे करें?
Zach

लगभग समान, लेकिन स्पष्ट आवश्यकता के साथ जो पाठ को हटाए जाने पर छोटा हो जाना चाहिए: stackoverflow.com/questions/454202/…
Ciro Santilli 郝海东 with with with

जवाबों:


75

फेसबुक ऐसा तब करता है, जब आप लोगों की दीवारों पर लिखते हैं, लेकिन केवल लंबवत आकार बदलता है।

शब्द-लपेट, लंबी लाइनों, और इसी तरह, क्षैतिज आकार मुझे एक गड़बड़ी के रूप में हमला करता है, लेकिन ऊर्ध्वाधर आकार बहुत सुरक्षित और अच्छा लगता है।

फेसबुक का उपयोग करने वाले newbies में से कोई भी मुझे नहीं पता है कि इसके बारे में कभी भी कुछ भी उल्लेख किया गया है या भ्रमित किया गया है। मैं इसे 'आगे बढ़ो, इसे लागू करो' कहने के प्रमाण के रूप में उपयोग करेगा।

कुछ जावास्क्रिप्ट कोड इसे करने के लिए, प्रोटोटाइप का उपयोग करते हुए (क्योंकि यही मैं परिचित हूं):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

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


2
यह मानता है कि ब्राउज़र किसी भी चरित्र में टूट जाता है, जो गलत है। इस पर प्रयास करें <textarea cols='5'>0 12345 12345 0</textarea>। (मैंने लगभग समान कार्यान्वयन लिखा और इसे उपयोग करने के एक महीने बाद तक इसे पकड़ नहीं पाया।) यह रिक्त लाइनों के लिए भी विफल रहता है।
सेंट-बूस्ट

क्या इसके लिए एक JQuery संस्करण है?
पन्नाधाय

$ A में बैकस्लैश (str.split ("\ n")) को एक और की आवश्यकता है। (उपर्युक्त उत्तर का मेरा संपादन किसी कारण से जीवित नहीं रहा।)
gherson

67

इनमें से कुछ उत्तरों को परिष्कृत करने के लिए सीएसएस को अधिक काम करने देना है।

मूल मार्ग ऐसा प्रतीत होता है:

  1. textareaऔर छिपाकर रखने के लिए एक कंटेनर तत्व बनाएँdiv
  2. जावास्क्रिप्ट का उपयोग करना, रखने textareaकी सामग्री के साथ सिंक किया गया divहै
  3. ब्राउज़र को उस div की ऊंचाई की गणना करने का काम करने दें
  4. क्योंकि ब्राउज़र छिपे हुए प्रतिपादन / आकार को संभालता है div, हम स्पष्ट रूप से textareaऊँचाई निर्धारित करने से बचते हैं ।

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}
html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
}
<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>


5
यह एक भयानक समाधान है! एकमात्र चेतावनी यह है कि वे ब्राउज़र जो बॉक्स-साइज़िंग (IE <7) का समर्थन नहीं करते हैं, वे ठीक से चौड़ाई की गणना नहीं करेंगे और इसलिए आप कुछ सटीकता खो देंगे, लेकिन यदि आप अंत में एक पंक्ति के लायक स्थान छोड़ रहे हैं, आपको अभी भी ठीक होना चाहिए। निश्चित रूप से इसे सादगी के लिए प्यार करते हैं।
एंटोनियो सालाजार कार्डोज़ो

4
मैंने इस समाधान को स्टैंडअलोन के रूप में लागू करने में स्वतंत्रता प्राप्त की, जो jQuery प्लगइन का उपयोग करने के लिए सरल है, जिसमें कोई मार्कअप या स्टाइल की आवश्यकता नहीं है। xion.io/jQuery.xarea के मामले में कोई इसका उपयोग कर सकता है :)
Xion

2
छिपी हुई टेक्स्टकॉपी सेट करना अभी भी छिपे हुए div को मार्कअप में जगह लेने की अनुमति देता है ताकि टेक्स्टकॉपी सामग्री बड़ी हो जाए, आपको अंततः अपने पेज की पूरी लंबाई के साथ एक स्क्रॉलबार मिलेगा ...
topwik

1
इसके लिए एक और अच्छा ट्विक; var text = $("#textArea").val().replace(/\n/g, '<br/>') + '&nbsp;';सुनिश्चित करें कि आपको टेक्स्टरी के अंत में खाली नई लाइन से गैर-रिक्त स्थान पर जाने पर झटकेदार व्यवहार नहीं मिलता है, क्योंकि छिपे हुए div को nbsp से लपेटना सुनिश्चित करता है।
बेखबर

1
@ & nbsp; जोड़ने पर शानदार कॉल जब आप पहली पंक्ति को एक नई पंक्ति में जोड़ते हैं तो आकार में अचानक वृद्धि से छुटकारा पाने के लिए - मेरे लिए यह इसके बिना टूट गया है - इसे उत्तर में जोड़ा जाना चाहिए!
davnicwil

40

यहाँ एक textarea autosizing के लिए एक और तकनीक है।

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

कोड: (सादे वेनिला जावास्क्रिप्ट)

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if (!text)
      return;

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }

   var adjustedHeight = text.clientHeight;
   if (!maxHeight || maxHeight > adjustedHeight)
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if (maxHeight)
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if (adjustedHeight > text.clientHeight)
         text.style.height = adjustedHeight + "px";
   }
}

डेमो: (jQuery का उपयोग करता है, textarea पर लक्ष्य अभी मैं टाइप कर रहा हूं - यदि आपने फायरबग स्थापित किया है, तो इस पृष्ठ पर कंसोल और परीक्षण में दोनों नमूने पेस्ट करें)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});

@ एसएमबी - जो शायद लागू करने के लिए बहुत मुश्किल नहीं होगा, बस एक और सशर्त जोड़ें
जेसन

@ जेसन: जब बॉक्स में पाठ इसे भरता नहीं है, clientHeightऔर scrollHeightबराबर होता है, तो आप इस विधि का उपयोग नहीं कर सकते हैं यदि आप चाहते हैं कि आपका टेक्स्टारिया सिकुड़े और साथ ही विकसित हो।
ब्रेंट बॉबी

बस इसे सिकुड़ने के लिए, आपको बस 6 से पहले इस कोड को जोड़ना होगा:if (text.clientHeight == text.scrollHeight) text.style.height = "20px";
Gapipro

14

संभवतः सबसे छोटा समाधान:

jQuery(document).ready(function(){
    jQuery("#textArea").on("keydown keyup", function(){
        this.style.height = "1px";
        this.style.height = (this.scrollHeight) + "px"; 
    });
});

इस तरह आपको किसी भी छिपे हुए divs या उस जैसी किसी चीज़ की ज़रूरत नहीं है।

नोट: आपको this.style.height = (this.scrollHeight) + "px";इस बात पर निर्भर करना होगा कि आप कैसे टेक्सारिया (लाइन-ऊंचाई, पैडिंग और उस तरह का सामान) को स्टाइल करते हैं।


यदि आप स्क्रॉलबार ब्लिंकिंग का बुरा नहीं मानते हैं तो सबसे अच्छा समाधान है।
cfillol

यह केवल कीअप इवेंट को पकड़ने के साथ पर्याप्त होगा। क्या आपको ऐसा नहीं लगता?
cfillol

2
स्क्रॉलबार ब्लिंकिंग से बचने के लिए textarea अतिप्रवाह संपत्ति को "छिपा" पर सेट करें।
cfillol

keyupपर्याप्त हो सकता है, लेकिन मुझे यकीन नहीं है। मैं बहुत खुश था कि मैंने यह पता लगाया, कि मैंने कुछ और कोशिश करना बंद कर दिया।
एडुआर्ड लुका

मैं अभी भी यह जानने की कोशिश कर रहा हूं कि आपने यह क्यों जोड़ा है ।style.height = "1px"; or this.style.height = "ऑटो"; इससे पहले। मुझे पता है कि, यदि हम इस पंक्ति को नहीं जोड़ते हैं, तो हम टेक्स्टरी को आकार नहीं देंगे। क्या कोई समझाने की परवाह कर सकता है?
बालासुब्रमणि M

8

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

//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options)
  {
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function()
  { 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
  }
});

कॉल करके विजेट बनाएं new Widget.Textarea('element_id')। डिफ़ॉल्ट विकल्प को ऑब्जेक्ट के रूप में पास करके ओवरराइड किया जा सकता है, जैसे new Widget.Textarea('element_id', { max_length: 600, min_height: 50})। यदि आप इसे पृष्ठ पर सभी पाठ्य-सामग्री के लिए बनाना चाहते हैं, तो कुछ ऐसा करें:

Event.observe(window, 'load', function() {
  $$('textarea').each(function(textarea) {
    new Widget.Textarea(textarea);
  });   
});

7

यहाँ एक समाधान के साथ है JQuery:

$(document).ready(function() {
    var $abc = $("#abc");
    $abc.css("height", $abc.attr("scrollHeight"));
})

abcएक है teaxtarea


5

नीचे दिए गए लिंक की जाँच करें: http://james.padolsey.com/javascript/jquery-plugin-autoreset/

$(document).ready(function () {
    $('.ExpandableTextCSS').autoResize({
        // On resize:
        onResize: function () {
            $(this).css({ opacity: 0.8 });
        },
        // After resize:
        animateCallback: function () {
            $(this).css({ opacity: 1 });
        },
        // Quite slow animation:
        animateDuration: 300,
        // More extra space:
        extraSpace:20,
        //Textarea height limit
        limit:10
    });
});


3

बस इस पर फिर से गौर करते हुए, मैंने इसे थोड़ा छोटा बना दिया है (हालांकि कोई व्यक्ति जो प्रोटोटाइप / जावास्क्रिप्ट पर पूरी बोतल है, सुधार कर सकता है।)।

var TextAreaResize = Class.create();
TextAreaResize.prototype = {
  initialize: function(element, options) {
    element = $(element);
    this.element = element;

    this.options = Object.extend(
      {},
      options || {});

    Event.observe(this.element, 'keyup',
      this.onKeyUp.bindAsEventListener(this));
    this.onKeyUp();
  },

  onKeyUp: function() {
    // We need this variable because "this" changes in the scope of the
    // function below.
    var cols = this.element.cols;

    var linecount = 0;
    $A(this.element.value.split("\n")).each(function(l) {
      // We take long lines into account via the cols divide.
      linecount += 1 + Math.floor(l.length / cols);
    })

    this.element.rows = linecount;
  }
}

बस इसके साथ कॉल करें:

new TextAreaResize('textarea_id_name_here');

3

मैंने कुछ आसान किया है। सबसे पहले मैंने TextArea को DIV में डाला। दूसरा, मैंने readyइस स्क्रिप्ट पर फ़ंक्शन को कॉल किया है ।

<div id="divTable">
  <textarea ID="txt" Rows="1" TextMode="MultiLine" />
</div>

$(document).ready(function () {
  var heightTextArea = $('#txt').height();
  var divTable = document.getElementById('divTable');
  $('#txt').attr('rows', parseInt(parseInt(divTable .style.height) / parseInt(altoFila)));
});

सरल। एक बार एक पंक्ति के एक TextArea की ऊंचाई से विभाजित होने के बाद, यह div की अधिकतम ऊंचाई है।


2

मुझे अपने लिए इस फंक्शन की जरूरत थी, लेकिन यहां से किसी ने भी काम नहीं किया, क्योंकि मुझे उनकी जरूरत थी।

इसलिए मैंने ओरियन के कोड का इस्तेमाल किया और इसे बदल दिया।

मैंने एक न्यूनतम ऊंचाई में जोड़ा, ताकि विनाश पर यह बहुत छोटा न हो।

function resizeIt( id, maxHeight, minHeight ) {
    var text = id && id.style ? id : document.getElementById(id);
    var str = text.value;
    var cols = text.cols;
    var linecount = 0;
    var arStr = str.split( "\n" );
    $(arStr).each(function(s) {
        linecount = linecount + 1 + Math.floor(arStr[s].length / cols); // take into account long lines
    });
    linecount++;
    linecount = Math.max(minHeight, linecount);
    linecount = Math.min(maxHeight, linecount);
    text.rows = linecount;
};

2

@ मीमिकल के जवाब की तरह।

हालाँकि मुझे कुछ सुधार मिले। आप jQuery height()फ़ंक्शन का उपयोग कर सकते हैं । लेकिन पैडिंग-टॉप और पेडिंग-बॉटम पिक्सल के बारे में पता होना चाहिए। अन्यथा आपका टेक्सचरिया बहुत तेजी से बढ़ेगा।

$(document).ready(function() {
  $textarea = $("#my-textarea");

  // There is some diff between scrollheight and height:
  //    padding-top and padding-bottom
  var diff = $textarea.prop("scrollHeight") - $textarea.height();
  $textarea.live("keyup", function() {
    var height = $textarea.prop("scrollHeight") - diff;
    $textarea.height(height);
  });
});

2

मेरा समाधान jQuery का उपयोग नहीं कर रहा है (क्योंकि कभी-कभी उन्हें एक ही चीज़ नहीं होना चाहिए) नीचे है। हालांकि यह केवल इंटरनेट एक्सप्लोरर 7 में परीक्षण किया गया था , इसलिए समुदाय सभी कारणों को इंगित कर सकता है यह गलत है:

textarea.onkeyup = function () { this.style.height = this.scrollHeight + 'px'; }

अब तक मुझे वास्तव में पसंद है कि यह कैसे काम कर रहा है, और मुझे अन्य ब्राउज़रों के बारे में परवाह नहीं है, इसलिए मैं शायद इसे अपने सभी टेक्स्टारस पर लागू करूंगा:

// Make all textareas auto-resize vertically
var textareas = document.getElementsByTagName('textarea');

for (i = 0; i<textareas.length; i++)
{
    // Retain textarea's starting height as its minimum height
    textareas[i].minHeight = textareas[i].offsetHeight;

    textareas[i].onkeyup = function () {
        this.style.height = Math.max(this.scrollHeight, this.minHeight) + 'px';
    }
    textareas[i].onkeyup(); // Trigger once to set initial height
}

1

यहाँ प्रोटोटाइप विजेट का विस्तार है जिसे जेरेमी ने 4 जून को पोस्ट किया था:

यदि आप textareas में सीमा का उपयोग कर रहे हैं तो यह उपयोगकर्ता को अधिक वर्ण दर्ज करने से रोकता है। यह जाँचता है कि क्या पात्र बचे हैं। यदि उपयोगकर्ता टेक्‍स्‍ट्री में टेक्‍स्‍ट को कॉपी करता है, तो टेक्‍स्‍ट अधिकतम पर कट जाता है। लंबाई:

/**
 * Prototype Widget: Textarea
 * Automatically resizes a textarea and displays the number of remaining chars
 * 
 * From: http://stackoverflow.com/questions/7477/autosizing-textarea
 * Inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
 */
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options){
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function(){ 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    // Keep the text/character count inside the limits:
    if($F(this.textarea).length > this.options.get('max_length')){
      text = $F(this.textarea).substring(0, this.options.get('max_length'));
        this.textarea.value = text;
        return false;
    }

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters remaining'));
  }
});

1

@memical के पास jQuery के साथ pageload पर textarea की ऊंचाई निर्धारित करने के लिए एक भयानक समाधान था, लेकिन मेरे आवेदन के लिए मैं textarea की ऊंचाई को बढ़ाने में सक्षम होना चाहता था क्योंकि उपयोगकर्ता ने अधिक सामग्री जोड़ी। मैंने निम्नलिखित के साथ मेमोरियल के समाधान का निर्माण किया:

$(document).ready(function() {
    var $textarea = $("p.body textarea");
    $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
    $textarea.keyup(function(){
        var current_height = $textarea.css("height").replace("px", "")*1;
        if (current_height + 5 <= $textarea.attr("scrollHeight")) {
            $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
        }
    });
});

यह बहुत चिकना नहीं है, लेकिन यह क्लाइंट-फेसिंग एप्लिकेशन भी नहीं है, इसलिए चिकनाई वास्तव में मायने नहीं रखती है। (अगर यह क्लाइंट-फेसिंग होता, तो मैंने शायद एक ऑटो-रिसाइज़ jQuery प्लगइन का उपयोग किया होता।)


1

उन लोगों के लिए जो IE के लिए कोडिंग कर रहे हैं और इस समस्या का सामना कर रहे हैं। IE की एक छोटी सी चाल है जो इसे 100% CSS बनाती है।

<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>

तुम भी पंक्तियों के लिए एक मूल्य प्रदान कर सकते हैं = "n" जो IE को अनदेखा करेगा, लेकिन अन्य ब्राउज़र उपयोग करेंगे। मैं वास्तव में कोडिंग से नफरत करता हूं जो IE हैक को लागू करता है, लेकिन यह बहुत मददगार है। यह संभव है कि यह केवल क्विरक्स मोड में काम करता है।


1

इंटरनेट एक्सप्लोरर, सफारी, क्रोम और ओपेरा उपयोगकर्ताओं को सीएसएस में लाइन-ऊंचाई मूल्य को स्पष्ट रूप से निर्धारित करने के लिए याद रखने की आवश्यकता है। मैं एक स्टाइलशीट करता हूं जो सभी टेक्स्ट बॉक्स के लिए प्रारंभिक उचित सेट करता है।

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>

1

यहाँ एक फ़ंक्शन है जिसे मैंने इसे करने के लिए jQuery में लिखा था - आप इसे प्रोटोटाइप में पोर्ट कर सकते हैं , लेकिन वे jQuery के "लीनिंग" का समर्थन नहीं करते हैं, इसलिए अजाक्स अनुरोधों द्वारा जोड़े गए तत्वों का जवाब नहीं होगा।

यह संस्करण न केवल फैलता है, बल्कि यह तब भी सिकुड़ता है जब डिलीट या बैकस्पेस दबाया जाता है।

यह संस्करण jQuery 1.4.2 पर निर्भर करता है।

का आनंद लें ;)

http://pastebin.com/SUKeBtnx

उपयोग:

$("#sometextarea").textareacontrol();

या (उदाहरण के लिए कोई भी jQuery चयनकर्ता)

$("textarea").textareacontrol();

यह इंटरनेट एक्सप्लोरर 7 / इंटरनेट एक्सप्लोरर 8 , फ़ायरफ़ॉक्स 3.5 और क्रोम पर परीक्षण किया गया था । सभी ठीक काम करता है।


1

ASP.NET का उपयोग करते हुए, बस यह करें:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Automatic Resize TextBox</title>
        <script type="text/javascript">
            function setHeight(txtarea) {
                txtarea.style.height = txtdesc.scrollHeight + "px";
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine"  onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
        </form>
    </body>
</html>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.