Perluas teks secara otomatis menggunakan jQuery

Bagaimana saya bisa membuat textarea diperluas secara otomatis menggunakan jQuery?

Saya memiliki kotak teks untuk menjelaskan agenda rapat, jadi saya ingin memperluas kotak teks itu ketika teks agenda saya terus mengembangkan area kotak teks itu.

Saya sudah mencoba banyak dan yang ini hebat. ^{Tautan sudah mati. Versi yang lebih baru tersedia di sini . Lihat di bawah untuk versi lama.}
Anda dapat mencoba dengan menekan dan menahan tombol enter di textarea. Bandingkan efeknya dengan plugin textarea yang sedang dikembangkan secara otomatis ....

edit berdasarkan komentar

$(function() {
   $('#txtMeetingAgenda').autogrow();
});

Catatan: Anda harus memasukkan file js yang dibutuhkan ...

Untuk mencegah bilah gulir di textarea berkedip & mati selama ekspansi / kontraksi, Anda dapat mengatur juga overflowke hidden:

$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()

Memperbarui:

Tautan di atas rusak. Tetapi Anda masih bisa mendapatkan file javascript di sini .

Jika Anda tidak menginginkan plugin, ada solusi yang sangat sederhana

$("textarea").keyup(function(e) {
    while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height()+1);
    };
});

Lihat itu bekerja di jsFiddle saya dulu menjawab pertanyaan teks lain di sini .

Untuk menjawab pertanyaan tentang melakukannya secara terbalik atau membuatnya lebih kecil saat teks dihapus: jsFiddle

Dan jika Anda menginginkan plugin

@ Jason telah merancang satu di sini

Tumbuh / Menyusut textarea. Demo ini menggunakan jQuery untuk pengikatan acara, tetapi tidak harus dengan cara apa pun.
( tidak ada dukungan IE - IE tidak menanggapi perubahan baris atribut )

HALAMAN DEMO

HTML

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

CSS

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
}

javascript (diperbarui)

$(document)
    .one('focus.textarea', '.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
            rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

• Teks Tumbuh Otomatis
• jQuery Autosize

Anda bisa coba yang ini

$('#content').on('change keyup keydown paste cut', 'textarea', function () {
        $(this).height(0).height(this.scrollHeight);
    }).find('textarea').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <textarea>How about it</textarea><br />
  <textarea rows="5">111111
222222
333333
444444
555555
666666</textarea>
</div>

Berkat SpYk3HH, saya mulai dengan solusinya dan mengubahnya menjadi solusi ini, yang menambahkan fungsionalitas yang menyusut dan bahkan lebih sederhana dan lebih cepat, saya kira.

$("textarea").keyup(function(e) {
    $(this).height(30);
    $(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
});

Diuji dalam browser Chrome, Firefox dan Android 2.3.3 saat ini.

Anda mungkin melihat kilatan bilah gulir di beberapa browser. Tambahkan CSS ini untuk menyelesaikannya.

textarea{ overflow:hidden; }

Untuk mendefinisikan textarea yang dapat diperluas secara otomatis, Anda harus melakukan dua hal:

1. Perluas sekali Anda mengklik tombol Enter di dalamnya, atau ketik konten lebih dari satu baris.
2. Dan mengecilkannya secara blur untuk mendapatkan ukuran sebenarnya jika pengguna telah memasukkan spasi putih ( bonus )

Berikut adalah fungsi buatan tangan untuk menyelesaikan tugas.

Bekerja dengan baik dengan hampir semua browser (<IE7) . Inilah metodenya:

    //Here is an event to get TextArea expand when you press Enter Key in it.
    // intiate a keypress event
    $('textarea').keypress(function (e) {  
       if(e.which == 13)   {   
       var control = e.target;                     
       var controlHeight = $(control).height();          
      //add some height to existing height of control, I chose 17 as my line-height was 17 for the control    
    $(control).height(controlHeight+17);  
    }
    }); 

$('textarea').blur(function (e) {         
    var textLines = $(this).val().trim().split(/\r*\n/).length;      
    $(this).val($(this).val().trim()).height(textLines*17);
    });

DI SINI ada posting tentang ini.

Saya telah menggunakan plugin Textarea Expander jQuery sebelumnya dengan hasil yang baik.

Semua orang harus mencoba plugin jQuery ini: xautoresize-jquery . Ini sangat bagus dan harus menyelesaikan masalah Anda.

function autosize(textarea) {
    $(textarea).height(1); // temporarily shrink textarea so that scrollHeight returns content height when content does not fill textarea
    $(textarea).height($(textarea).prop("scrollHeight"));
}

$(document).ready(function () {
    $(document).on("input", "textarea", function() {
        autosize(this);
    });
    $("textarea").each(function () {
        autosize(this);
    });
});

(Ini tidak akan berfungsi di Internet Explorer 9 atau lebih lama karena memanfaatkan inputacara)

Saya baru saja membangun fungsi ini untuk memperluas teks pada pageload. Hanya mengubah eachke keyupdan itu akan terjadi ketika textarea diketik di.

// On page-load, auto-expand textareas to be tall enough to contain initial content
$('textarea').each(function(){
    var pad = parseInt($(this).css('padding-top'));
    if ($.browser.mozilla) 
        $(this).height(1);
    var contentHeight = this.scrollHeight;
    if (!$.browser.mozilla) 
        contentHeight -= pad * 2;
    if (contentHeight > $(this).height()) 
        $(this).height(contentHeight);
});

Diuji di Chrome, IE9 dan Firefox. Sayangnya Firefox memiliki bug ini yang mengembalikan nilai salah scrollHeight, sehingga kode di atas berisi solusi (peretasan) untuk itu.

Saya memperbaiki beberapa bug dalam jawaban yang diberikan oleh Reigel (jawaban yang diterima):

1. Urutan di mana entitas html diganti sekarang tidak menyebabkan kode tak terduga dalam elemen bayangan. (Dokumen asli diganti ">" oleh "& ampgt;", menyebabkan perhitungan ketinggian yang salah dalam beberapa kasus yang jarang terjadi).
2. Jika teks berakhir dengan baris baru, bayangan sekarang mendapatkan karakter tambahan "#", alih-alih memiliki tinggi tambahan tetap, seperti halnya dalam aslinya.
3. Mengubah ukuran teks setelah inisialisasi memperbarui lebar bayangan.
4. menambahkan word-wrap: break-word for shadow, jadi itu pecah sama dengan textarea (memaksa istirahat untuk kata-kata yang sangat panjang)

Masih ada beberapa masalah terkait ruang. Saya tidak melihat solusi untuk spasi ganda, mereka ditampilkan sebagai spasi tunggal dalam bayangan (rendering html). Ini tidak dapat dipindahkan dengan menggunakan & nbsp ;, karena spasi harus dipecahkan. Juga, textarea memecah baris setelah spasi, jika tidak ada ruang untuk ruang itu akan memecah baris pada titik sebelumnya. Saran diterima.

Kode yang diperbaiki:

(function ($) {
    $.fn.autogrow = function (options) {
        var $this, minHeight, lineHeight, shadow, update;
        this.filter('textarea').each(function () {
            $this = $(this);
            minHeight = $this.height();
            lineHeight = $this.css('lineHeight');
            $this.css('overflow','hidden');
            shadow = $('<div></div>').css({
                position: 'absolute',
                'word-wrap': 'break-word',
                top: -10000,
                left: -10000,
                width: $this.width(),
                fontSize: $this.css('fontSize'),
                fontFamily: $this.css('fontFamily'),
                lineHeight: $this.css('lineHeight'),
                resize: 'none'
            }).appendTo(document.body);
            update = function () {
                shadow.css('width', $(this).width());
                var val = this.value.replace(/&/g, '&amp;')
                                    .replace(/</g, '&lt;')
                                    .replace(/>/g, '&gt;')
                                    .replace(/\n/g, '<br/>')
                                    .replace(/\s/g,'&nbsp;');
                if (val.indexOf('<br/>', val.length - 5) !== -1) { val += '#'; }
                shadow.html(val);
                $(this).css('height', Math.max(shadow.height(), minHeight));
            };
            $this.change(update).keyup(update).keydown(update);
            update.apply(this);
        });
        return this;
    };
}(jQuery));

Kode SpYk3HH dengan tambahan untuk ukuran menyusut.

function get_height(elt) {
    return elt.scrollHeight + parseFloat($(elt).css("borderTopWidth")) + parseFloat($(elt).css("borderBottomWidth"));
}

$("textarea").keyup(function(e) {
    var found = 0;
    while (!found) {
        $(this).height($(this).height() - 10);
        while($(this).outerHeight() < get_height(this)) {
            $(this).height($(this).height() + 1);
            found = 1;
        };
    }
});

Ini bekerja lebih baik untuk saya:

$('.resiText').on('keyup input', function() { 
$(this).css('height', 'auto').css('height', this.scrollHeight + (this.offsetHeight - this.clientHeight));
});

.resiText {
    box-sizing: border-box;
    resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="resiText"></textarea>

Orang-orang tampaknya memiliki solusi yang sangat berhasil ...

Beginilah cara saya melakukannya:

  $('textarea').keyup(function()
  {
    var 
    $this  = $(this),
    height = parseInt($this.css('line-height'),     10),
    padTop = parseInt($this.css('padding-top'),     10),
    padBot = parseInt($this.css('padding-bottom'),  10);

    $this.height(0);

    var 
    scroll = $this.prop('scrollHeight'),
    lines  = (scroll  - padTop - padBot) / height;

    $this.height(height * lines);
  });

Ini akan bekerja dengan garis panjang, serta garis putus .. tumbuh dan menyusut ..

Saya menulis fungsi jquery ini yang sepertinya berfungsi.

Anda perlu menentukan ketinggian minimum dalam css, dan kecuali Anda ingin melakukan beberapa pengkodean, panjangnya harus dua digit. yaitu 12px;

$.fn.expand_ta = function() {

var val = $(this).val();
val = val.replace(/</g, "&lt;");
val = val.replace(/>/g, "&gt;");
val += "___";

var ta_class = $(this).attr("class");
var ta_width = $(this).width();

var min_height = $(this).css("min-height").substr(0, 2);
min_height = parseInt(min_height);

$("#pixel_height").remove();
$("body").append('<pre class="'+ta_class+'" id="pixel_height" style="position: absolute; white-space: pre-wrap; visibility: hidden; word-wrap: break-word; width: '+ta_width+'px; height: auto;"></pre>');
$("#pixel_height").html(val);

var height = $("#pixel_height").height();
if (val.substr(-6) == "<br />"){
    height = height + min_height;
};
if (height >= min_height) $(this).css("height", height+"px");
else $(this).css("height", min_height+"px");
}

Bagi siapa pun yang menggunakan plugin yang diposting oleh Reigel, harap diperhatikan bahwa ini akan menonaktifkan fungsi undo di Internet Explorer (coba demo dulu).

Jika ini merupakan masalah bagi Anda maka saya akan menyarankan menggunakan plugin yang diposting oleh @richsage sebagai gantinya, karena tidak menderita masalah ini. Lihat poin kedua tentang Mencari Textarea Ubah Ukuran Terbaik untuk informasi lebih lanjut.

Ada juga proyek yang sangat keren bgrins/ExpandingTextareas (github), berdasarkan publikasi oleh Neill Jenkins yang disebut Memperluas Daerah Teks Elegan

Saya ingin animasi dan menyusut otomatis. Kombinasi ini tampaknya sulit, karena orang-orang datang dengan solusi yang cukup intens untuk itu. Saya telah membuatnya multi-textarea-proof, juga. Dan itu tidak seberat plugin jQuery.

Saya mendasarkan diri saya pada jawaban vsync (dan peningkatan yang dia buat untuk itu), http://codepen.io/anon/pen/vlIwj adalah codepen untuk perbaikan saya.

HTML

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

CSS

body{ background:#728EB2; }

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
  transition:all 1s;
  -webkit-transition:all 1s;
}

JS

var rowheight = 0;

$(document).on('input.textarea', '.autoExpand', function(){
    var minRows = this.getAttribute('data-min-rows')|0,
        rows    = this.value.split("\n").length;
    $this = $(this);
    var rowz = rows < minRows ? minRows : rows;
    var rowheight = $this.attr('data-rowheight');
    if(!rowheight){
      this.rows = rowz;
      $this.attr('data-rowheight', (this.clientHeight  - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom')))/ rowz);
    }else{
      rowz++;
      this.style.cssText = 'height:' + rowz * rowheight + 'px'; 
    }
});

Ada banyak jawaban untuk ini tetapi saya menemukan sesuatu yang sangat sederhana, lampirkan acara keyup ke textarea dan periksa untuk memasukkan tombol tekan kode kuncinya adalah 13

keyPressHandler(e){ if(e.keyCode == 13){ e.target.rows = e.target.rows + 1; } }

Ini akan menambahkan baris lain ke textarea Anda dan Anda dapat mengatur lebar menggunakan CSS.

Katakanlah Anda mencoba menyelesaikan ini menggunakan Knockout ... beginilah caranya:

Di halaman:

<textarea data-bind="event: { keyup: $root.GrowTextArea }"></textarea>

Dalam model tampilan:

self.GrowTextArea = function (data, event) {
    $('#' + event.target.id).height(0).height(event.target.scrollHeight);
}

Ini akan berfungsi bahkan jika Anda memiliki beberapa textareas yang dibuat oleh foreach Knockout seperti yang saya lakukan.

Solusi sederhana:

HTML:

<textarea class='expand'></textarea>

JS:

$('textarea.expand').on('input', function() {
  $(this).scrollTop($(this).height());
});
$('textarea.expand').scroll(function() {
  var h = $(this).scrollTop();
  if (h > 0)
    $(this).height($(this).height() + h);
});

https://fiddle.jshell.net/7wsnwbzg/

Solusi paling sederhana:

html:

<textarea class="auto-expand"></textarea>

css:

.auto-expand {
    overflow:hidden;
    min-height: 80px;
}

js (jquery):

$(document).ready(function () {
 $("textarea.auto-expand").focus(function () {
        var $minHeight = $(this).css('min-height');
        $(this).on('input', function (e) {
            $(this).css('height', $minHeight);
            var $newHeight = $(this)[0].scrollHeight;
            $(this).css('height', $newHeight);
        });
    });       
});

Solusi dengan JS murni

function autoSize() {
  if (element) {
    element.setAttribute('rows', 2) // minimum rows
    const rowsRequired = parseInt(
      (element.scrollHeight - TEXTAREA_CONFIG.PADDING) / TEXTAREA_CONFIG.LINE_HEIGHT
    )
    if (rowsRequired !== parseInt(element.getAttribute('rows'))) {
      element.setAttribute('rows', rowsRequired)
    }
  }
}

https://jsfiddle.net/Samb102/cjqa2kf4/54/

Ini adalah solusi yang akhirnya saya gunakan. Saya menginginkan solusi inline, dan sejauh ini tampaknya berhasil:

<textarea onkeyup="$(this).css('height', 'auto').css('height', this.scrollHeight + this.offsetHeight - this.clientHeight);"></textarea>

function autoResizeTextarea() {
  for (let index = 0; index < $('textarea').length; index++) {
    let element = $('textarea')[index];
    let offset = element.offsetHeight - element.clientHeight;
    $(element).css('resize', 'none');
    $(element).on('input', function() {
      $(this).height(0).height(this.scrollHeight - offset - parseInt($(this).css('padding-top')));
    });
  }
}

https://codepen.io/nanachi1/pen/rNNKrzQ

ini seharusnya bekerja.

@Georgiy Ivankin membuat saran dalam komentar, saya berhasil menggunakannya :) -, tetapi dengan sedikit perubahan:

$('#note').on('keyup',function(e){
    var maxHeight = 200; 
    var f = document.getElementById('note'); 
    if (f.clientHeight < f.scrollHeight && f.scrollHeight < maxHeight ) 
        { f.style.height = f.scrollHeight + 'px'; }
    });      

Itu berhenti berkembang setelah mencapai ketinggian maksimum 200px

Pertanyaan lama tetapi Anda dapat melakukan sesuatu seperti ini:

html:

<textarea class="text-area" rows="1"></textarea>

jquery:

var baseH; // base scroll height

$('body')
    .one('focus.textarea', '.text-area', function(e) {
        baseH = this.scrollHeight;
    })
    .on('input.textarea', '.text-area', function(e) {
        if(baseH < this.scrollHeight) {
            $(this).height(0).height(this.scrollHeight);
        }
        else {
            $(this).height(0).height(baseH);
        }
    });

Dengan cara ini pengubahan ukuran otomatis akan berlaku untuk semua textarea dengan kelas "area teks". Juga menyusut saat teks dihapus.

jsfiddle:

https://jsfiddle.net/rotaercz/46rhcqyn/

Coba ini:

  $('textarea[name="mytextarea"]').on('input', function(){
    $(this).height('auto').height($(this).prop('scrollHeight') + 'px');
  }).trigger('input');

Solusi jQuery sederhana:

$("textarea").keyup(function() {
    var scrollHeight = $(this).prop('scrollHeight') - parseInt($(this).css("paddingTop")) - parseInt($(this).css("paddingBottom"));

    if (scrollHeight > $(this).height()) {
        $(this).height(scrollHeight + "px");
    }
});

HTML:

<textarea rows="2" style="padding: 20px; overflow: hidden; resize: none;"></textarea>

Overflow harus disembunyikan . Ubah ukuran tidak ada jika Anda tidak ingin membuatnya dapat diubah ukurannya dengan mouse.