प्रोटोटाइप का उपयोग कर पाठ क्षेत्र स्वत: आकार बदलना

वोट
108

मैं वर्तमान में कंपनी के लिए मैं काम के लिए एक आंतरिक बिक्री आवेदन पर काम कर रहा हूँ, और मैं एक रूप है कि उपयोगकर्ता वितरण पता बदलने की अनुमति देता है।

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

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

आईएसओ

कोई विचार?


@Chris

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

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

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

यह एक gimick होने के बारे में नहीं है, यह एक पाठ क्षेत्र उपयोगकर्ता को संपादित अनावश्यक जगह नहीं ले जाएगा कर सकते हैं, लेकिन यह सभी पाठ दिखाएगा होने के बारे में है।

हालांकि अगर किसी दूसरे तरीके से समस्या दृष्टिकोण के साथ आता है मैं भी है कि के लिए खुला रहा हूँ।


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

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;
};
11/08/2008 को 00:43
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


18 जवाब

वोट
69

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

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

फेसबुक का इस्तेमाल करने वाली-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>

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

11/08/2008 को 03:49
का स्रोत उपयोगकर्ता

वोट
37

यहाँ एक पाठ क्षेत्र स्वत: आकार बदलना के लिए एक और तकनीक है।

  • पंक्ति की ऊंचाई के बजाय पिक्सेल ऊंचाई उपयोग करता है: लाइन की अधिक सटीक हैंडलिंग लपेट अगर एक आनुपातिक फ़ॉन्ट प्रयोग किया जाता है।
  • आईडी या इनपुट के रूप में तत्व को स्वीकार करता है
  • इसके बजाय यदि आप नहीं चाहते हैं तो उपयोगी पाठ क्षेत्र एक निश्चित आकार से आगे (परदे पर यह सब रखने के लिए, को तोड़ने के लेआउट से बचने के, आदि) - एक वैकल्पिक अधिकतम ऊंचाई पैरामीटर स्वीकार करता है
  • Firefox 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, लक्ष्यों का उपयोग करता है - अगर आपके पास Firebug स्थापित, इस पृष्ठ पर सांत्वना और परीक्षण में दोनों नमूने पेस्ट)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});
11/08/2008 को 14:41
का स्रोत उपयोगकर्ता

वोट
2

बस इस समीक्षा, मैं इसे एक छोटा सा tidier (हालांकि कोई है जो पर पूरी बोतल है बनाया है प्रोटोटाइप / जावास्क्रिप्ट सुधार का सुझाव सकता है?)।

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');
16/09/2008 को 00:07
का स्रोत उपयोगकर्ता

वोट
0

मैं खुद के लिए इस समारोह की जरूरत है, लेकिन यहां से लोगों से कोई भी काम के रूप में मैं उन्हें जरूरत है।

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

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

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;
};
03/06/2009 को 18:08
का स्रोत उपयोगकर्ता

वोट
7

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

//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})। आप पृष्ठ पर सभी textareas के लिए उसे बनाने के लिए चाहते हैं, की तरह कुछ कार्य करें:

Event.observe(window, 'load', function() {
  $$('textarea').each(function(textarea) {
    new Widget.Textarea(textarea);
  });   
});
04/06/2009 को 02:25
का स्रोत उपयोगकर्ता

वोट
0

यहाँ प्रोटोटाइप विजेट कि जेरेमी 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'));
  }
});
30/11/2009 को 13:39
का स्रोत उपयोगकर्ता

वोट
56

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

बुनियादी मार्ग प्रतीत हो रहा है:

  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;
    width: 100%;
}
<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>

09/01/2010 को 05:57
का स्रोत उपयोगकर्ता

वोट
0

इंटरनेट एक्सप्लोरर, सफारी, क्रोम और ओपेरा उपयोगकर्ताओं सीएसएस में line-height मान सेट explicidly के लिए याद की जरूरत है। मैं एक स्टाइलशीट कि इस प्रकार सभी पाठ बक्से के लिए प्रारंभिक प्रॉपर्टीज़ सेट करते हैं।

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>
12/01/2010 को 03:07
का स्रोत उपयोगकर्ता

वोट
0

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

इस संस्करण का विस्तार न केवल, लेकिन यह भी जब delete या backspace दबाया जाता है अनुबंध।

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

का आनंद लें ;)

http://pastebin.com/SUKeBtnx

उपयोग:

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

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

$("textarea").textareacontrol();

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

22/06/2010 को 14:26
का स्रोत उपयोगकर्ता

वोट
4

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

$(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
    });
});
01/07/2010 को 10:53
का स्रोत उपयोगकर्ता

वोट
6

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

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

abcएक है teaxtarea

04/08/2010 को 20:23
का स्रोत उपयोगकर्ता

वोट
0

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

$(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 प्लगइन का इस्तेमाल किया गया होगा।)

04/01/2011 को 16:28
का स्रोत उपयोगकर्ता

वोट
1

@memical के जवाब की तरह।

हालांकि मैं कुछ सुधार पाया। आप jQuery का उपयोग कर सकते height()समारोह। लेकिन गद्दी-टॉप और padding-bottom पिक्सल के बारे में पता होना। अन्यथा अपने पाठ क्षेत्र बहुत तेजी से बढ़ेगा।

$(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);
  });
});
11/09/2011 को 15:11
का स्रोत उपयोगकर्ता

वोट
2

मैं कुछ काफी आसान बना दिया है। सबसे पहले मैं एक DIV में TextArea डाल दिया। दूसरा, मैं पर बुलाया गया है 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)));
});

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

05/03/2012 को 17:40
का स्रोत उपयोगकर्ता

वोट
0

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>
22/02/2013 को 17:21
का स्रोत उपयोगकर्ता

वोट
0

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

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

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

// 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
}
28/03/2013 को 14:12
का स्रोत उपयोगकर्ता

वोट
10

शायद कम से कम समाधान:

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";कि कैसे आप पाठ क्षेत्र (line-height, गद्दी और सामान उस तरह) शैली के आधार पर।

18/05/2013 को 01:12
का स्रोत उपयोगकर्ता

वोट
0

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

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

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

13/06/2013 को 21:26
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more