ขยายข้อความอัตโนมัติโดยใช้ jQuery

ฉันจะทำให้ textarea ขยายโดยอัตโนมัติโดยใช้ jQuery ได้อย่างไร

ฉันมีกล่องข้อความสำหรับอธิบายวาระการประชุมดังนั้นฉันต้องการขยายกล่องข้อความนั้นเมื่อข้อความของวาระการประชุมของฉันเติบโตขึ้นเรื่อย ๆ ในพื้นที่กล่องข้อความนั้น

ฉันลองมาเยอะแล้วอัน นี้ยอดเยี่ยมมาก ^{ลิงค์เสียชีวิต รุ่นใหม่เป็นใช้ได้ที่นี่ ดูด้านล่างสำหรับรุ่นเก่า}
คุณสามารถลองโดยกดปุ่ม Enter ใน textarea เปรียบเทียบเอฟเฟกต์กับปลั๊กอิน textarea ที่ขยายอัตโนมัติอื่น ๆ ....

แก้ไขตามความคิดเห็น

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

หมายเหตุ: คุณควรรวมไฟล์ js ที่จำเป็น ...

เพื่อป้องกันไม่ให้เลื่อนใน textarea จากกระพริบและปิดระหว่างการขยายตัว / หด, คุณสามารถตั้งค่าoverflowการhiddenเช่นกัน:

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

ปรับปรุง:

ลิงก์ด้านบนใช้งานไม่ได้ แต่คุณยังสามารถรับไฟล์จาวาสคริปต์ที่นี่

หากคุณไม่ต้องการปลั๊กอินมีทางออกที่ง่ายมาก

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

เห็นมันทำงานในjsFiddle ฉันเคยตอบคำถาม textarea อื่นที่นี่ที่นี่อีก

ในการตอบคำถามในการทำตรงกันข้ามหรือทำให้เล็กลงเมื่อข้อความถูกลบ: jsFiddle

และถ้าคุณต้องการปลั๊กอิน

@ Jasonได้ออกแบบไว้ที่นี่แล้ว

Grows / Shrinks textarea การสาธิตนี้ใช้ jQuery สำหรับการเชื่อมโยงเหตุการณ์ แต่ไม่จำเป็นต้องไปในทางใดทางหนึ่ง
( ไม่รองรับ IE - IE ไม่ตอบสนองต่อการเปลี่ยนแอตทริบิวต์ของแถว )

DEMO PAGE

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

จาวาสคริปต์ (อัพเดท)

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

• Textareas เติบโตอัตโนมัติ
• jQuery ปรับขนาดอัตโนมัติ

คุณสามารถลองอันนี้

$('#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>

ต้องขอบคุณ SpYk3HH ฉันเริ่มต้นด้วยวิธีแก้ปัญหาของเขาและเปลี่ยนเป็นโซลูชันนี้ซึ่งเพิ่มฟังก์ชั่นการหดตัวและง่ายยิ่งขึ้นและเร็วขึ้นฉันเข้าใจ

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

ทดสอบในเบราว์เซอร์ Chrome, Firefox และ Android 2.3.3 ในปัจจุบัน

คุณอาจเห็นกะพริบของแถบเลื่อนในบางเบราว์เซอร์ เพิ่ม CSS นี้เพื่อแก้ปัญหานั้น

textarea{ overflow:hidden; }

ในการกำหนด textarea ที่ขยายได้อัตโนมัติคุณต้องทำสองสิ่ง:

1. ขยายมันเมื่อคุณคลิกปุ่ม Enter ภายในหรือพิมพ์เนื้อหามากกว่าหนึ่งบรรทัด
2. และย่อขนาดให้เบลอเพื่อให้ได้ขนาดจริงหากผู้ใช้ป้อนช่องว่างสีขาว ( โบนัส )

นี่คือฟังก์ชั่นที่ทำด้วยมือเพื่อให้งานสำเร็จ

ทำงานได้ดีกับเกือบทุกเบราว์เซอร์ (<7) นี่คือวิธีการ:

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

นี่คือโพสต์เกี่ยวกับเรื่องนี้

ฉันใช้ปลั๊กอิน jQuery Textarea Expanderมาก่อนด้วยผลลัพธ์ที่ดี

ทุกคนควรพยายามปลั๊กอิน jQuery นี้: xautoresize-jQuery มันดีจริงๆและควรแก้ปัญหาของคุณ

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

(สิ่งนี้จะไม่ทำงานใน Internet Explorer 9 หรือเก่ากว่าเนื่องจากใช้ประโยชน์จากinputเหตุการณ์)

ฉันเพิ่งสร้างฟังก์ชันนี้เพื่อขยาย textareas บน pageload เพียงแค่เปลี่ยนeachเป็นkeyupและจะเกิดขึ้นเมื่อพิมพ์ textarea

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

ทดสอบใน Chrome, IE9 และ Firefox น่าเสียดายที่ Firefox มีข้อผิดพลาดนี้ซึ่งส่งคืนค่าที่ไม่ถูกต้องscrollHeightดังนั้นโค้ดด้านบนจึงมีวิธีแก้ไข (แฮ็ค) สำหรับมัน

ฉันแก้ไขข้อบกพร่องเล็กน้อยในคำตอบที่ Reigel ให้ (คำตอบที่ยอมรับ):

1. คำสั่งที่เปลี่ยนเอนทิตี html จะไม่ทำให้เกิดรหัสที่ไม่คาดคิดในองค์ประกอบเงา (ต้นฉบับแทนที่ ">" โดย "& ampgt;" ทำให้การคำนวณความสูงไม่ถูกต้องในบางกรณีที่หายาก)
2. หากข้อความลงท้ายด้วยการขึ้นบรรทัดใหม่ตอนนี้เงาจะได้รับอักขระพิเศษ "#" แทนที่จะมีความสูงเพิ่มคงที่เช่นเดียวกับในกรณีเดิม
3. การปรับขนาด textarea หลังจาก initialisation จะอัพเดตความกว้างของเงา
4. เพิ่มการตัดคำ: break-word สำหรับเงาดังนั้นมันจึงแตกเหมือนกับ textarea (บังคับให้หยุดพักสำหรับคำที่ยาวมาก)

มีบางประเด็นที่เกี่ยวข้องกับช่องว่าง ฉันไม่เห็นวิธีแก้ปัญหาสำหรับการเว้นวรรคสองครั้งพวกเขาจะแสดงเป็นช่องว่างเดียวในเงา (การแสดงผล html) สิ่งนี้ไม่สามารถทำได้โดยใช้ & nbsp; เนื่องจากช่องว่างควรแตก นอกจากนี้ textarea จะแบ่งบรรทัดหลังช่องว่างหากไม่มีที่ว่างสำหรับช่องว่างนั้นจะเป็นการแบ่งบรรทัดที่จุดก่อนหน้า ข้อเสนอแนะยินดีต้อนรับ

รหัสที่ถูกต้อง:

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

รหัสของ SpYk3HH ด้วยนอกจากนี้สำหรับขนาดการหดตัว

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

สิ่งนี้ทำงานได้ดีกว่าสำหรับฉัน:

$('.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>

คนดูเหมือนจะมีวิธีแก้ปัญหาที่ทำงานมากกว่า ...

นี่คือวิธีที่ฉันทำ:

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

สิ่งนี้จะทำงานกับสายยาวเช่นเดียวกับตัวแบ่งบรรทัด .. เติบโตและหดตัว ..

ฉันเขียนฟังก์ชัน jquery นี้ซึ่งดูเหมือนว่าจะใช้งานได้

คุณจำเป็นต้องระบุความสูงขั้นต่ำใน css และหากคุณไม่ต้องการทำการเข้ารหัสบางส่วนจะต้องมีความยาวสองหลัก เช่น 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");
}

สำหรับทุกคนที่ใช้ปลั๊กอินที่โพสต์โดย Reigel โปรดทราบว่านี่จะปิดการใช้งานการเลิกทำใน Internet Explorer (ไปสาธิตการใช้งาน)

หากเป็นปัญหาสำหรับคุณฉันขอแนะนำให้ใช้ปลั๊กอินที่ โพสต์โดย @richsage แทนเนื่องจากไม่ได้รับปัญหานี้ ดูหัวข้อย่อยที่สองของการค้นหา Textarea การปรับขนาดที่ดีที่สุดสำหรับข้อมูลเพิ่มเติม

นอกจากนี้ยังมีbgrins/ExpandingTextareas (github)โครงการที่เจ๋งมากโดยอ้างอิงจากการตีพิมพ์ของNeill Jenkins ที่เรียกว่าExpanding Text Areas Made Elegant

ฉันต้องการภาพเคลื่อนไหวและย่อขนาดอัตโนมัติ เห็นได้ชัดว่าการรวมกันเป็นเรื่องยากเพราะคนคิดวิธีแก้ปัญหาที่ค่อนข้างรุนแรง ฉันทำมันหลายข้อความ textarea- พิสูจน์ด้วย และมันก็ไม่หนักอย่างน่าขันเหมือนปลั๊กอิน jQuery

ฉันตามตัวเองกับคำตอบของ vsync (และการปรับปรุงที่เขาทำเพื่อมัน), http://codepen.io/anon/pen/vlIwjเป็น codepen สำหรับการปรับปรุงของฉัน

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

มีคำตอบมากมายสำหรับสิ่งนี้ แต่ฉันพบบางสิ่งที่ง่ายมากแนบเหตุการณ์ keyup กับ textarea และตรวจสอบการกดปุ่ม enter รหัสกุญแจคือ 13

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

สิ่งนี้จะเพิ่มแถวอื่นให้กับ textarea ของคุณและคุณสามารถกำหนดสไตล์ความกว้างโดยใช้ CSS

สมมติว่าคุณกำลังพยายามทำให้สำเร็จโดยใช้การทำให้ล้มลง ... นี่คือวิธี:

ในหน้า:

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

ในรูปแบบการดู:

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

สิ่งนี้จะใช้ได้แม้ว่าคุณจะมี textareas หลายรายการที่สร้างขึ้นโดย Knockout foreach เช่นเดียวกับฉัน

วิธีแก้ปัญหาง่าย ๆ :

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/

ทางออกที่ง่ายที่สุด:

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

การแก้ปัญหาด้วย JS บริสุทธิ์

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/

นี่คือทางออกที่ฉันใช้ ฉันต้องการโซลูชันแบบอินไลน์และตอนนี้ดูเหมือนว่าจะใช้งานได้ดี:

<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

สิ่งนี้น่าจะใช้ได้

@Gorgi Ivankin ทำข้อเสนอแนะในความคิดเห็นฉันใช้มันสำเร็จ :) - แต่มีการเปลี่ยนแปลงเล็กน้อย:

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

มันจะหยุดขยายตัวเมื่อถึงความสูงสูงสุด 200px

คำถามเก่า แต่คุณสามารถทำสิ่งนี้:

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

วิธีนี้การย่อขนาดอัตโนมัติจะนำไปใช้กับ textarea ใด ๆ กับคลาส "text-area" ลดขนาดเมื่อลบข้อความด้วย

jsfiddle:

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

ลองสิ่งนี้:

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

วิธีแก้ปัญหา jQuery ง่าย ๆ :

$("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>

มากเกินควรจะซ่อน การปรับขนาดนั้นไม่มีหากคุณไม่ต้องการปรับขนาดด้วยเมาส์