Bagaimana cara mengubah ukuran textarea menggunakan Prototipe?

121

Saat ini saya mengerjakan aplikasi penjualan internal untuk perusahaan tempat saya bekerja, dan saya memiliki formulir yang memungkinkan pengguna mengubah alamat pengiriman.

Sekarang saya pikir itu akan terlihat jauh lebih bagus, jika textarea yang saya gunakan untuk detail alamat utama hanya akan mengambil area teks di dalamnya, dan secara otomatis mengubah ukuran jika teks diubah.

Berikut tangkapan layarnya saat ini.

Alamat ISO

Ada ide?

@Tokopedia

Poin yang bagus, tetapi ada alasan saya ingin mengubah ukurannya. Saya ingin area yang dibutuhkan menjadi area informasi yang terkandung di dalamnya. Seperti yang Anda lihat di tangkapan layar, jika saya memiliki textarea tetap, ini membutuhkan ruang vertikal yang lumayan.

Saya bisa memperkecil font, tapi saya butuh alamat yang besar dan bisa dibaca. Sekarang saya bisa mengurangi ukuran area teks, tapi kemudian saya punya masalah dengan orang yang memiliki baris alamat yang membutuhkan 3 atau 4 (satu membutuhkan 5) baris. Membutuhkan pengguna untuk menggunakan scrollbar adalah hal yang tidak-tidak.

Saya kira saya harus lebih spesifik. Saya setelah mengubah ukuran vertikal, dan lebarnya tidak terlalu penting. Satu-satunya masalah yang terjadi dengan itu, adalah nomor ISO (besar "1") didorong ke bawah alamat ketika lebar jendela terlalu kecil (seperti yang Anda lihat pada tangkapan layar).

Ini bukan tentang memiliki gimick; ini tentang memiliki bidang teks yang dapat diedit pengguna yang tidak akan memakan ruang yang tidak perlu, tetapi akan menampilkan semua teks di dalamnya.

Meskipun jika seseorang menemukan cara lain untuk mendekati masalah, saya terbuka untuk itu juga.

Saya telah mengubah kode sedikit karena tingkahnya agak aneh. Saya mengubahnya untuk mengaktifkan pada keyup, karena itu tidak akan mempertimbangkan karakter yang baru saja diketik.

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;
};

— Mike
sumber

Bisakah Anda membuat situs demo di mana kita dapat melihat ini di tempat kerja?

— Einar Ólafsson

3

plugin ini sepertinya bagus jacklmoore.com/autosize

— Gaurav Shah

Apakah ada versi JQuery? Bagaimana cara mengakses kolom dan baris TextArea di JQuery?

— Zach

Hampir sama, tetapi dengan persyaratan eksplisit yang harus menjadi lebih kecil ketika teks dihapus: stackoverflow.com/questions/454202/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

75

Facebook melakukannya, ketika Anda menulis di dinding orang, tetapi hanya mengubah ukurannya secara vertikal.

Perubahan ukuran horizontal menurut saya berantakan, karena pembungkus kata, garis panjang, dan sebagainya, tetapi perubahan ukuran vertikal tampaknya cukup aman dan menyenangkan.

Tak satu pun dari pengguna baru Facebook yang saya kenal pernah menyebutkan sesuatu tentangnya atau bingung. Saya akan menggunakan ini sebagai bukti anekdotal untuk mengatakan 'lanjutkan, terapkan'.

Beberapa kode JavaScript untuk melakukannya, menggunakan Prototype (karena itulah yang saya kenal):

<!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>

PS: Jelas sekali kode JavaScript ini sangat naif dan tidak teruji dengan baik, dan Anda mungkin tidak ingin menggunakannya di kotak teks dengan novel di dalamnya, tetapi Anda memahami gambaran umumnya.

— Orion Edwards
sumber

2

Ini mengasumsikan browser merusak karakter apa pun, yang salah. Cobalah <textarea cols='5'>0 12345 12345 0</textarea>. (Saya menulis implementasi yang hampir identik dan tidak menangkap ini sampai setelah sebulan menggunakannya.) Itu juga gagal untuk baris kosong.

— st-boost

Apakah ada versi JQuery untuk ini?

— emeraldhieu

Garis miring terbalik di $ A (str.split ("\ n")) membutuhkan garis miring lain. (

— Hasil

67

Salah satu perbaikan untuk beberapa jawaban ini adalah membiarkan CSS melakukan lebih banyak pekerjaan.

Rute dasarnya tampaknya:

Buat elemen wadah untuk menampung textareadan yang tersembunyidiv
Menggunakan Javascript, menjaga textarea'isi s disinkronisasikan dengan div' s
Biarkan browser melakukan pekerjaan menghitung ketinggian div itu
Karena browser menangani rendering / ukuran yang tersembunyi div, kami menghindari pengaturan tinggi secara eksplisit 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>

Luaskan cuplikan

— Jan Miksovsky
sumber

5

Ini adalah solusi yang luar biasa! Satu-satunya peringatan adalah bahwa browser yang tidak mendukung ukuran kotak (IE <7) tidak akan menghitung lebar dengan benar dan oleh karena itu Anda akan kehilangan beberapa keakuratan, tetapi jika Anda meninggalkan ruang senilai baris pada akhirnya, kamu masih baik-baik saja. Pasti menyukainya karena kesederhanaannya.

— Antonio Salazar Cardozo

4

Saya mengambil kebebasan dalam mengimplementasikan solusi ini sebagai plugin jQuery mandiri, mudah digunakan, tanpa memerlukan markup atau gaya. xion.io/jQuery.xarea seandainya seseorang dapat menggunakannya :)

— Xion

2

mengatur textCopy menjadi tersembunyi masih memungkinkan div tersembunyi untuk mengambil ruang di markup sehingga konten textCopy menjadi lebih besar, Anda akhirnya akan mendapatkan scrollbar di sepanjang halaman Anda ...

— topwik

1

Perubahan bagus lainnya untuk ini; var text = $("#textArea").val().replace(/\n/g, '<br/>') + ' ';memastikan Anda tidak mendapatkan perilaku tersentak-sentak saat berpindah dari baris baru yang kosong di akhir textarea ke yang tidak kosong, karena div tersembunyi memastikan untuk membungkus ke nbsp.

— tanpa disadari

1

@tidak menyadarinya, panggilan yang bagus untuk menambahkan '& nbsp;' untuk menghilangkan peningkatan tiba-tiba dalam ukuran ketika Anda menambahkan huruf pertama ke baris baru - bagi saya itu rusak tanpa ini - ini harus ditambahkan ke jawaban!

— davnicwil

40

Berikut teknik lain untuk mengubah ukuran area teks secara otomatis.

Menggunakan tinggi piksel daripada tinggi garis: penanganan baris yang lebih akurat jika menggunakan font proporsional.
Menerima baik ID atau elemen sebagai input
Menerima parameter ketinggian maksimum opsional - berguna jika Anda lebih suka tidak membiarkan area teks berkembang melebihi ukuran tertentu (simpan semuanya di layar, hindari merusak tata letak, dll.)
Diuji di Firefox 3 dan Internet Explorer 6

Kode: (JavaScript vanilla biasa)

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";
   }
}

Demo: (menggunakan jQuery, target pada textarea yang saya ketik sekarang - jika Anda menginstal Firebug , tempelkan kedua sampel ke konsol dan uji di halaman ini)

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

— Shog9
sumber

@SMB - itu mungkin tidak akan terlalu sulit untuk diterapkan, cukup tambahkan persyaratan lainnya

— Jason

@Jason: Ketika teks di dalam kotak tidak mengisinya, clientHeightdan scrollHeightsama, jadi Anda tidak dapat menggunakan metode ini jika Anda ingin textarea Anda menyusut dan juga bertambah.

— Brant Bobby

Untuk membuatnya menyusut, Anda hanya perlu menambahkan kode ini sebelum baris 6:if (text.clientHeight == text.scrollHeight) text.style.height = "20px";

— Gapipro

14

Mungkin solusi terpendek:

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

Dengan cara ini Anda tidak memerlukan div tersembunyi atau semacamnya.

Catatan: Anda mungkin harus bermain-main dengan this.style.height = (this.scrollHeight) + "px";tergantung pada bagaimana Anda menata textarea (tinggi baris, padding, dan semacamnya).

— Eduard Luca
sumber

Solusi terbaik jika Anda tidak keberatan scrollbar berkedip.

— cfillol

Itu akan cukup hanya dengan menangkap acara keyup. Bukankah begitu?

— cfillol

2

Setel properti textarea overflow ke "hidden" untuk menghindari kedipan bilah gulir.

— cfillol

keyupbisa cukup, tapi saya tidak yakin. Saya sangat senang karena saya menemukan jawabannya, sehingga saya berhenti mencoba hal lain.

— Eduard Luca

Saya masih mencoba mempelajari mengapa Anda menambahkan this.style.height = "1px"; atau this.style.height = "auto"; sebelum. Saya tahu itu, textarea tidak akan mengubah ukuran ketika kita menghapus konten jika kita tidak menambahkan baris ini. Bisakah seseorang yang peduli untuk menjelaskan?

— Balasubramani L

8

Berikut adalah versi Prototipe dari mengubah ukuran area teks yang tidak bergantung pada jumlah kolom di textarea. Ini adalah teknik yang unggul karena memungkinkan Anda untuk mengontrol area teks melalui CSS serta memiliki textarea lebar variabel. Selain itu, versi ini menampilkan jumlah karakter yang tersisa. Meskipun tidak diminta, ini adalah fitur yang sangat berguna dan mudah dihapus jika tidak diinginkan.

//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'));
  }
});

Buat widget dengan menelepon new Widget.Textarea('element_id'). Opsi default dapat diganti dengan meneruskannya sebagai objek, mis new Widget.Textarea('element_id', { max_length: 600, min_height: 50}). Jika Anda ingin membuatnya untuk semua area teks di halaman, lakukan sesuatu seperti:

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

— Jeremy Kauffman
sumber

7

Inilah solusinya dengan JQuery:

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

abcadalah a teaxtarea.

— memical
sumber

5

Periksa tautan di bawah ini: 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
    });
});

— Gyan
sumber

Tautan mati. Kode ada di sini james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/…

— Matthew Hui

3

Baru saja meninjau ini, saya telah membuatnya sedikit lebih rapi (meskipun seseorang yang menggunakan Prototipe / JavaScript dapat menyarankan perbaikan?).

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;
  }
}

Cukup sebut dengan:

new TextAreaResize('textarea_id_name_here');

— Mike
sumber

3

Saya telah membuat sesuatu yang sangat mudah. Pertama saya menempatkan TextArea menjadi DIV. Kedua, saya telah memanggil readyfungsi ke skrip ini.

<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)));
});

Sederhana. Ini adalah tinggi maksimum div setelah dirender, dibagi dengan tinggi satu TextArea dalam satu baris.

— Eduardo Mass
sumber

2

Saya membutuhkan fungsi ini untuk diri saya sendiri, tetapi tidak satu pun dari sini yang berfungsi seperti yang saya butuhkan.

Jadi saya menggunakan kode Orion dan mengubahnya.

Saya menambahkan ketinggian minimum, sehingga pada penghancuran itu tidak terlalu kecil.

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;
};

— Peter Mortensen
sumber

2

Seperti jawaban @memical.

Namun saya menemukan beberapa perbaikan. Anda dapat menggunakan height()fungsi jQuery . Namun perhatikan piksel padding-top dan padding-bottom. Jika tidak, textarea Anda akan tumbuh terlalu cepat.

$(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);
  });
});

— Anatoly Mironov
sumber

2

Solusi saya tidak menggunakan jQuery (karena terkadang tidak harus sama) ada di bawah. Meskipun ini hanya diuji di Internet Explorer 7 , sehingga komunitas dapat menunjukkan semua alasan mengapa ini salah:

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

Sejauh ini saya sangat suka cara kerjanya, dan saya tidak peduli dengan browser lain, jadi saya mungkin akan menerapkannya ke semua area teks saya:

// 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
}

— pengguna1566694
sumber

1

Berikut adalah ekstensi untuk widget Prototipe yang diposting Jeremy pada tanggal 4 Juni:

Ini menghentikan pengguna memasukkan lebih banyak karakter jika Anda menggunakan batasan di area teks. Ia memeriksa apakah ada karakter yang tersisa. Jika pengguna menyalin teks ke dalam textarea, teks tersebut dipotong maksimal. panjangnya:

/**
 * 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'));
  }
});

— monyet lorem
sumber

1

@memical memiliki solusi luar biasa untuk mengatur ketinggian textarea pada pageload dengan jQuery, tetapi untuk aplikasi saya, saya ingin dapat meningkatkan ketinggian textarea saat pengguna menambahkan lebih banyak konten. Saya membangun solusi memical dengan yang berikut:

$(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));
        }
    });
});

Ini tidak terlalu mulus tetapi juga bukan aplikasi yang menghadap ke klien, jadi kelancaran tidak terlalu penting. (Seandainya ini berhadapan dengan klien, saya mungkin hanya akan menggunakan plugin jQuery ubah ukuran otomatis.)

— WNRosenberg
sumber

1

Bagi mereka yang melakukan pengkodean untuk IE dan mengalami masalah ini. IE memiliki sedikit trik yang membuatnya 100% CSS.

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

Anda bahkan dapat memberikan nilai untuk baris = "n" yang akan diabaikan IE, tetapi browser lain akan menggunakannya. Saya sangat benci pengkodean yang menerapkan peretasan IE, tetapi yang ini sangat membantu. Ada kemungkinan bahwa ini hanya berfungsi dalam mode Quirks.

— Einstein47
sumber

1

Pengguna Internet Explorer, Safari, Chrome dan Opera harus ingat untuk secara eksplisit mengatur nilai ketinggian baris di CSS. Saya membuat stylesheet yang menetapkan properit awal untuk semua kotak teks sebagai berikut.

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

— Larry
sumber

1

Berikut adalah fungsi yang baru saja saya tulis di jQuery untuk melakukannya - Anda dapat memindahkannya ke Prototipe , tetapi mereka tidak mendukung "liveness" dari jQuery sehingga elemen yang ditambahkan oleh permintaan Ajax tidak akan merespons.

Versi ini tidak hanya meluas, tetapi juga menyusut saat delete atau backspace ditekan.

Versi ini mengandalkan jQuery 1.4.2.

Nikmati ;)

http://pastebin.com/SUKeBtnx

Pemakaian:

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

atau (pemilih jQuery apa pun misalnya)

$("textarea").textareacontrol();

Ini telah diuji di Internet Explorer 7 / Internet Explorer 8 , Firefox 3.5, dan Chrome. Semuanya bekerja dengan baik.

— Alex
sumber

1

Menggunakan ASP.NET, cukup lakukan ini:

<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>

— Pat Murray
sumber