การสร้าง textarea พร้อมปรับขนาดอัตโนมัติ

366

มีอีกหัวข้อหนึ่งเกี่ยวกับเรื่องนี้ซึ่งฉันได้ลอง แต่มีปัญหาหนึ่งคือ: textareaไม่หดตัวถ้าคุณลบเนื้อหา ฉันไม่สามารถหาวิธีย่อขนาดให้ถูกต้องได้ - clientHeightค่ากลับมาเป็นขนาดเต็มtextareaไม่ใช่เนื้อหา

รหัสจากหน้านั้นอยู่ด้านล่าง:

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

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

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}
javascript  html  resize  height  textarea 
— DisgruntledGoat
แหล่งที่มา
คำตอบที่ยอมรับสำหรับเธรดที่คุณเชื่อมโยงนั้นใช้ได้กับฉัน การเพิ่มตัวแบ่งบรรทัดจะขยายพื้นที่ข้อความและลบออกเพื่อลดขนาดพื้นที่ข้อความ สิ่งที่เบราว์เซอร์ที่คุณใช้?
— EndangeredMassa
3
ฟังก์ชั่นของฉันไม่ผิดพลาด จำเป็นต้องพิมพ์บรรทัดใหม่ที่ท้ายบรรทัด นี่เป็นทางออกที่ดีกว่า james.padolsey.com/javascript/jquery-plugin-autoresize
คุณสามารถลองปลั๊กอินของฉันสำหรับสิ่งนี้: github.com/AndrewDryga/jQuery.Textarea.Autoresize
— Andrew Dryga
สำเนาที่เป็นไปได้ของการปรับขนาดข้อความอัตโนมัติโดยใช้เครื่องต้นแบบ
— Ciro Santilli 法轮功冠状病六四事件法轮功
ฉันสร้างแพ็คเกจสำหรับสิ่งนี้หากคุณใช้ปฏิกิริยา: npmjs.com/package/react-fluid-textarea
— Martin Dawson

คำตอบ:

230

สิ่งนี้ใช้ได้สำหรับฉัน (Firefox 3.6 / 4.0 และ Chrome 10/11):

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
ขยายตัวอย่างข้อมูล

หากคุณต้องการลองบนjsfiddle มันเริ่มต้นด้วยบรรทัดเดียวและเติบโตในจำนวนที่แน่นอนเท่านั้นที่จำเป็น มันก็โอเคสำหรับคนเดียวtextareaแต่ฉันต้องการที่จะเขียนอะไรบางอย่างที่ฉันจะมีหลายอย่างมากมายtextarea(ประมาณเท่าที่ปกติจะมีบรรทัดในเอกสารข้อความขนาดใหญ่) ในกรณีนั้นมันช้าจริงๆ (ใน Firefox มันช้าอย่างบ้าคลั่ง) ดังนั้นฉันอยากได้วิธีที่ใช้ CSS ล้วนๆ สิ่งนี้จะเป็นไปได้ด้วยcontenteditableแต่ฉันต้องการให้เป็นธรรมดาเท่านั้น

— Panzi
แหล่งที่มา
13
มันทำ! สร้าง jsfiddle สำหรับ ya: jsfiddle.net/CbqFvตอนนี้ใช้งานได้ใน Chrome, Firefox และ IE8 - แม้ว่าจะเป็นข้อผิดพลาดเล็กน้อยใน IE8 ในขณะที่คุณเพิ่มหรือลดจำนวนบรรทัดมันจะแปลกเล็กน้อย ดังที่คุณอาจเห็นในปลั๊กอินปรับขนาดอัตโนมัติสำหรับ jQuery พวกเขาทำงานโดยการคัดลอกข้อความตั้งค่าความสูงเป็นอัตโนมัติแทนที่จะเป็นแบบดั้งเดิมจากนั้นใช้การตั้งค่า scrollheight บนต้นฉบับ ฉันทำอย่างนั้นในซอที่ได้รับการปรับปรุงนี้: jsfiddle.net/CbqFv/2มันแก้ปัญหา IE ได้ แต่ Firefox หยุดทำงาน
— Chris Moschini
3
@HelenNeely: จากนั้นอย่าใช้ ID เช่นใช้คลาสและทำสิ่งที่ init ทำสำหรับองค์ประกอบทั้งหมดของคลาสนั้น นั่นควรเป็นภารกิจเริ่มต้น
— panzi
3
@ DenilsonSáหากใครจะคิดได้ว่ามีเพียงเบราว์เซอร์ที่ทันสมัยเท่านั้นที่ใช้เว็บจะเป็นสถานที่ที่ดีกว่า
— panzi
2
สิ่งนี้จะไม่สามารถใช้งานได้หากแถบเลื่อนถูก envolved ใน IE11 หากคุณใช้ซอนี้jsfiddle.net/CbqFvและป้อนบรรทัดจนกว่าคุณจะมีแถบเลื่อนคุณจะเห็นมัน ความคิดใด ๆ
— kaljak
6
แบ่งนี้อย่างสมบูรณ์หาก textarea อยู่ใกล้ปลายด้านล่างหน้า - style.height='auto'ทุกอย่างกลับมาและกระโดดไปข้างหน้าเนื่องจาก ฉันสงสัยว่าวิธีแก้ปัญหาคือการเพิ่มพี่น้องที่ซ่อนอยู่ซึ่งใช้สำหรับการวัดเท่านั้น
— rr-
372

โซลูชั่น YET SIMPLE ที่สมบูรณ์แบบ

อัปเดต2020-05-14 (ปรับปรุงการรองรับเบราว์เซอร์สำหรับโทรศัพท์มือถือและแท็บเล็ต)

รหัสต่อไปนี้จะใช้งานได้:

  • ในการป้อนข้อมูลที่สำคัญ
  • ด้วยข้อความที่วาง(คลิกขวา & ctrl + v)
  • ด้วยการตัดข้อความ(คลิกขวา & ctrl + x)
  • ด้วยข้อความที่โหลดไว้ล่วงหน้า
  • ด้วยความกว้างของเว็บไซต์textarea (หลายช่องข้อความ)
  • ด้วยFirefox (ทดสอบ v31-67)
  • ด้วยChrome (ทดสอบ v37-74)
  • ด้วยIE (ทดสอบ v9-v11)
  • ด้วยEdge (ทดสอบ v14-v18)
  • ด้วยIOS ซาฟารี
  • ด้วยAndroid เบราว์เซอร์
  • ด้วย JavaScript โหมดเข้มงวด
  • มีการตรวจสอบw3c
  • และมีความคล่องตัวและมีประสิทธิภาพ

ตัวเลือก 1 (พร้อม jQuery)

ตัวเลือกนี้ต้องการjQueryและผ่านการทดสอบแล้วและใช้งานได้กับ1.7.2 - 3.3.1

ง่าย (เพิ่มรหัส jquery นี้ไปยังไฟล์สคริปต์หลักของคุณและลืมมัน)

$('textarea').each(function () {
  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
ขยายตัวอย่างข้อมูล

Test on jsfiddle

ตัวเลือก 2 (JavaScript บริสุทธิ์)

ง่าย (เพิ่ม JavaScript นี้ลงในไฟล์สคริปต์หลักของคุณและลืมมัน)

const tx = document.getElementsByTagName('textarea');
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
ขยายตัวอย่างข้อมูล

Test on jsfiddle

ตัวเลือก 3 (นามสกุล jQuery)

มีประโยชน์ถ้าคุณต้องการใช้การผูกมัดเพิ่มเติมกับข้อความที่คุณต้องการให้มีขนาดอัตโนมัติ 

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ 'height': 'auto', 'overflow-y': 'hidden' })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on('input', function() {
        autoHeight_(this);
      });
    });
  }
});

วิงวอนกับ $('textarea').autoHeight()

การอัปเดต TEXTAREA VIA JAVASCRIPT

เมื่อฉีดเนื้อหาลงใน textarea ผ่าน JavaScript ผนวกรหัสต่อไปนี้เพื่อเรียกใช้ฟังก์ชันในตัวเลือก 1

$('textarea').trigger('input');

ความสูง TEXTAREA PRESET

ในการแก้ไขความสูงเริ่มต้นของ textarea คุณจะต้องเพิ่มเงื่อนไขเพิ่มเติม:

const txHeight = 16;
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  if (tx[i].value == '') {
    tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
  } else {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  }
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
ขยายตัวอย่างข้อมูล

— DreamTeK
แหล่งที่มา
12
นี่เป็นวิธีแก้ปัญหาที่ยอดเยี่ยมมันจะเข้าใจได้ง่ายขึ้นเล็กน้อยหากชื่อเมธอดและชื่อพารามิเตอร์ถูกอัพเดตเป็นชื่อจริงแทนที่จะเป็นตัวอักษรแต่ละตัว
— Chris Marisic
5
@Obsidian ขอบคุณ! ฉันเพิ่งค้นพบว่าทำไมฉันถึงได้ 0 เสมอ - ฉันใส่ textarea ไว้ใน Modal Bootstrap! เนื่องจากคำกริยาถูกซ่อนไว้ในตอนแรก textarea ในนั้นจะมี 0 scrollHeight 😂😂
— WTIFS
7
@Obsidian Fantastic !! (ตัวเลือก 3) นี่this.style.height = 'auto';คือการแก้ไขพฤติกรรมเวทย์มนตร์ ฉันรู้สึกผิดหวังอย่างมากว่าทำไมสเฮลไฮท์จึงมีพฤติกรรมแปลก ๆ ความสูงเป็นอัตโนมัติจากนั้นจับคู่ scrollHeight ในรอบการเรนเดอร์เดียวกันก็ยังทำให้ฉันคิดว่ามัน 'แก้ไข' ปัญหานี้ได้อย่างไร
— บิตน้อยกว่า
2
ฉันลองตัวเลือก 3 ใน Chrome วันนี้และต้องทำการปรับแต่งสองสามครั้ง 1) มันจะไม่ลดขนาดลงอย่างถูกต้องเสมอหากคุณมีการเปลี่ยนแปลง "ความสูง" หรือ "ทั้งหมด" ใน textarea ฉันขอแนะนำไม่ให้ใช้การเปลี่ยนที่มีผลต่อความสูง 2) scrollHeight ส่งคืนค่าความสูงขั้นต่ำสองแถว (อาจเป็นเพราะเป็นค่าเริ่มต้นสำหรับ textareas ใน Chrome) แต่ถ้าคุณเปลี่ยนค่านี้ style.height = 'auto'; ถึง this.style.height = '0px'; และเพิ่มความสูงขั้นต่ำเพื่อป้องกันไม่ให้สถานะเริ่มต้นเป็น 0 จริง scrollHeight จะส่งคืนความสูงหนึ่งแถวตามความเหมาะสม
— ZorroDeLaArena
3
@Obsidian คุณสามารถอธิบายวิธีthis.style.height = 'auto';แก้ไขพฤติกรรมของ scrollHeight ได้อย่างไร มันวิเศษมาก
— Sidney
63

โซลูชัน jQuery ปรับ css ให้ตรงกับความต้องการของคุณ

CSS ...

div#container textarea {
    min-width: 270px;
    width: 270px;
    height: 22px;
    line-height: 24px;
    min-height: 22px;
    overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
    padding-top: 1.1em; /* fixes text jump on Enter keypress */
}

จาวาสคริปต์ ...

// auto adjust the height of
$('#container').delegate( 'textarea', 'keydown', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keydown();

หรือทางเลือกสำหรับ jQuery 1.7 + ...

// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();

ฉันได้สร้างซอที่มีการออกแบบขั้นต่ำเป็นจุดเริ่มต้นสำหรับการทดลองของคุณ ... http://jsfiddle.net/53eAy/951/

— ชิม
แหล่งที่มา
5
นี่เป็นสิ่งที่ดี แต่ฉันจะเพิ่มลงoverflow-y: hidden;ใน css เพื่อป้องกันแถบเลื่อนจากการกระพริบสั้น ๆ เมื่อเกิดการปรับขนาด
— brettjonesdev
ไม่แน่ใจทั้งหมด แต่ถ้าไม่มีพื้นที่ข้อความจะเติบโตขึ้นมากเกินไป ฉันคิดว่ามันจะทำอย่างไรกับวิธีการคำนวณองค์ประกอบความสูงความสูง
— chim
1
ใช้เหตุการณ์หลายอย่างเพื่อทำให้สถานการณ์จริงสมบูรณ์ขึ้น $('textarea.auto-resize').on('change cut paste drop keyup', function(){...})
— raxith
1
กระโดดไปมาอย่างบ้าคลั่งใน Chrome 40 Win 8.1 ด้วยข้อความที่ยาวกว่าวิวพอร์ต วาทกรรมมันค่อนข้างใช้งานไม่ได้
— tobibeer
1
การกด Enter (ขึ้นบรรทัดใหม่) ในการเลื่อน ขนาดจะไม่ปรับจนกว่าจะมีการปล่อยกุญแจ
— Niels Abildgaard
28 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Textarea autoresize</title>
    <style>
    textarea {
        overflow: hidden;
    }
    </style>
    <script>
    function resizeTextarea(ev) {
        this.style.height = '24px';
        this.style.height = this.scrollHeight + 12 + 'px';
    }

    var te = document.querySelector('textarea');
    te.addEventListener('input', resizeTextarea);
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>

ผ่านการทดสอบใน Firefox 14 และ Chromium 18 หมายเลข 24 และ 12 นั้นเป็นแบบสุ่มทดสอบดูว่าอะไรที่เหมาะกับคุณที่สุด

คุณสามารถทำได้โดยไม่มีสไตล์และแท็กสคริปต์ แต่มันกลายเป็นเรื่องยุ่งเล็กน้อยสำหรับ imho (นี่เป็น HTML แบบเก่า + JS และไม่ได้รับการสนับสนุน)

<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>

แก้ไข: รหัสที่ทันสมัย เปลี่ยนแอตทริบิวต์ onkeyup เพื่อ addEventListener
แก้ไข: keydown ทำงานได้ดีกว่า keyup
แก้ไข: ประกาศฟังก์ชั่นก่อนใช้
Edit: input ทำงานได้ดีกว่า keydown (ขอบคุณ @ WASD42 & @ MA-Maddin)

jsfiddle

— GijsjanB
แหล่งที่มา
3
อันนี้มีข้อบกพร่องบางอย่าง: 1) Textarea จะไม่ได้รับการปรับขนาดแล้วผู้ใช้วางสิ่งที่มีปุ่มเมาส์ของเขาเท่านั้น 2) หากผู้ใช้จะวางสิ่งที่ใช้แป้นพิมพ์ (Ctrl + V) textarea จะถูกปรับขนาดเฉพาะเมื่อเขาจะปล่อย Ctrl หากผู้ใช้จะกด Ctrl + V หลาย ๆ ครั้งข้อความจะเติบโตหลังจากที่ผ่านมา คุณควรเพิ่มฟังก์ชั่นเดียวกันเพื่อวางตัดเปลี่ยนและวางกิจกรรมด้วย
— WASD42
ดังนั้นเพียงแค่ใช้inputเหตุการณ์แทน ดูstackoverflow.com/a/14029861/1951524
— Martin Schneider
รุ่นที่ได้รับการปรับปรุงพร้อมtextareaการรองรับหลายอย่างในหนึ่งเดียว:document.querySelectorAll('textarea').forEach(function(te){ te.addEventListener("input", function() { this.style.height='24px'; this.style.height=this.scrollHeight+12+'px'; }); });
— Meisner
1
@ Meisner มันสั้นกว่า แต่ฉันจะไม่บอกว่ามัน "ดีขึ้น" ด้วยฟังก์ชั่นที่ไม่ระบุชื่อไม่มีทางที่จะโทรremoveEventListenerและล้างข้อมูลผู้ฟังกิจกรรมของคุณ สิ่งนี้มีความสำคัญอย่างยิ่งเมื่อสร้างผู้ฟังเหตุการณ์ทั่วสถานที่ในลูป forEach นอกจากนี้ในมุมมองของฉันการอ่านมีความสำคัญมากกว่าความรัดกุม
— GijsjanB
สำหรับผู้อื่นและในอนาคตฉันตรวจสอบให้แน่ใจว่าbox-sizing: border-box;มีการตั้งค่าคุณสมบัติหรืออื่น ๆ textarea อธิบายโดย 4px สำหรับแต่ละเหตุการณ์ onInput ฉันใช้เวลาประมาณ 3 ชั่วโมงจนกระทั่งฉันพบว่านี่เป็นปัญหา
— AIon
24

ทางออกที่ดีที่สุด (ทำงานและสั้น) สำหรับฉันคือ:

    $(document).on('input', 'textarea', function () {
        $(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height
    });

มันใช้งานได้อย่างมีเสน่ห์โดยไม่ต้องกะพริบด้วยการแปะ (ด้วยเม้าส์ด้วย) ตัดเข้าและหดให้มีขนาดที่เหมาะสม

โปรดดูที่jsFiddle

— vatavale
แหล่งที่มา
สุดยอด !!! ดีลหนึ่งบรรทัด! คำถามโง่ฉันสามารถเพิ่มแอนิเมชันเมื่อปรับขนาดแล้วหรือไม่ ชอบ sorta กล่องข้อความเบา ๆ ปรับขนาดแล้วข้ามไปที่ขนาด?
— user2513846
1
@ user2513846 ดูเหมือนว่าไม่สามารถทำได้โดยการออกแบบการแก้ไขหลายบรรทัด ฉันทำตัวอย่างของขนาด textarea เคลื่อนไหว: jsfiddle.net/yk2g333eตามที่คุณรู้ว่าเคอร์เซอร์ข้อความลงไปที่และหรือบรรทัดหรือเครื่องหมายตกดังนั้นถ้าไม่มีการหยุดชั่วคราวในขณะนี้ไม่มีอะไรจะเคลื่อนไหว แต่การหยุดชั่วคราวจะสร้างความรำคาญให้กับผู้ใช้
— vatavale
1
@ user2513846 อย่างไรก็ตามด้วยบรรทัดว่างอีกหนึ่งบรรทัดที่ส่วนท้ายของ textarea เป็นไปได้ที่จะมีภาพเคลื่อนไหวที่ราบรื่น: jsfiddle.net/p23erdfr
— vatavale
16

คุณกำลังใช้มูลค่าที่สูงขึ้นของ clientHeight ปัจจุบันและ scrollHeight เนื้อหา เมื่อคุณทำให้ scrollHeight มีขนาดเล็กลงโดยการลบเนื้อหาพื้นที่ที่คำนวณได้จะไม่เล็กลงเพราะ clientHeight ซึ่งถูกตั้งค่าตาม style.height ก่อนหน้านี้กำลังเปิดอยู่ คุณสามารถใช้ scrollHeight ได้สูงสุดและค่าความสูงขั้นต่ำที่คุณกำหนดไว้ล่วงหน้าหรือคำนวณจาก textarea.rows

โดยทั่วไปแล้วคุณไม่ควรพึ่งพา scrollHeight ในการควบคุมฟอร์ม นอกเหนือจาก scrollHeight ที่ได้รับการสนับสนุนแบบดั้งเดิมน้อยกว่าส่วนขยาย IE อื่น ๆ HTML / CSS ไม่ได้พูดอะไรเกี่ยวกับวิธีการใช้งานการควบคุมแบบฟอร์มภายในและคุณไม่รับประกันว่า scrollHeight จะมีความหมายอะไร (โดยปกติเบราว์เซอร์บางตัวได้ใช้วิดเจ็ตระบบปฏิบัติการสำหรับงานทำให้การโต้ตอบ CSS และ DOM ใน internals เป็นไปไม่ได้) อย่างน้อยสูดดมสโครล scrollHeight / clientHeight ก่อนที่จะพยายามเปิดใช้งานเอฟเฟกต์

อีกวิธีหนึ่งที่เป็นไปได้ในการหลีกเลี่ยงปัญหาหากเป็นสิ่งสำคัญที่ต้องใช้งานอย่างกว้างขวางมากขึ้นอาจใช้ div ขนาดที่ถูกซ่อนไว้ในความกว้างเท่ากับ textarea และตั้งค่าเป็นแบบอักษรเดียวกัน ในคีย์อัพคุณคัดลอกข้อความจาก textarea ไปยังโหนดข้อความใน div ที่ซ่อนอยู่ (อย่าลืมแทนที่ '\ n' ด้วยตัวแบ่งบรรทัดและหลีกเลี่ยง '<' / '&' อย่างถูกต้องหากคุณใช้ InnerHTML) จากนั้นเพียงแค่วัดค่าชดเชยความสูงของ div จะให้ความสูงที่คุณต้องการ

— bobince
แหล่งที่มา
1
เบราว์เซอร์ใดที่ควรมีปัญหากับscrollHeighttextareas ใช้งานได้ดีกับ IE, Firefox และ Opera รุ่นปัจจุบัน ...
— Christoph
1
สิ่งเดียวที่ฉันต้องทำคือ Konqueror ซึ่งคืนค่าความสูงของลูกค้าเป็น scrollHeight นี่เป็นพฤติกรรมที่คุณสามารถคาดหวังได้เว้นแต่เบราว์เซอร์จะใช้รูปแบบกล่อง CSS กับภายในของเครื่องมือสิ่งที่พวกเขาไม่ได้ทำเสมอไปและมาตรฐานไม่ได้บอกว่าต้องทำ
— bobince
14

หากคุณไม่ต้องการสนับสนุน IE8 คุณสามารถใช้inputเหตุการณ์:

var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));

resizingTextareas.forEach(function(textarea) {
  textarea.addEventListener('input', autoresize, false);
});

function autoresize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight+'px';
  this.scrollTop = this.scrollHeight;
  window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}

ตอนนี้คุณแค่เพิ่ม CSS และทำเสร็จแล้ว:

textarea[autoresize] {
  display: block;
  overflow: hidden;
  resize: none;
}

การใช้งาน:

<textarea autoresize>Type here and I’ll resize.</textarea>

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีการทำงานในโพสต์บล็อกของฉัน

— Maximilian Hoffmann
แหล่งที่มา
1
วิธีแก้ปัญหาดี แต่ต้องการแก้ไขเล็กน้อย เมื่อเนื้อหาของ textarea ถูกโหลด f.ex จากฐานข้อมูล textarea ยังเล็กอยู่ คุณต้องทริกเกอร์inputเหตุการณ์ในระหว่างการเริ่มต้นในรอบ foreach
— Ajax
11

AutoSize

https://github.com/jackmoore/autosize

งานเดี่ยวแบบสแตนด์อโลนเป็นที่นิยม (3.0k + GitHub ดาว ณ เดือนตุลาคม 2018) มีให้ในcdnjs ) และน้ำหนักเบา (~ 3.5k) การสาธิต:

<textarea id="autosize" style="width:200px;">a
J   b
c</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>autosize(document.querySelectorAll('#autosize'));</script>
ขยายตัวอย่างข้อมูล

BTW หากคุณใช้โปรแกรมแก้ไข ACE ให้ใช้maxLines: Infinity: ปรับความสูงกับเนื้อหาในโปรแกรมแก้ไข Ace Cloud 9 โดยอัตโนมัติ

— Ciro Santilli 郝海东法轮功病六四法轮功法轮功
แหล่งที่มา
2
เวอร์ชัน 2 ได้เปิดตัวในเดือนกุมภาพันธ์ 2558 มันกลายเป็นเรื่องง่ายขึ้นและไม่ขึ้นอยู่กับ jQuery อีกต่อไป
— กรอบ
ขออภัยมันใช้งานได้ บางทีฉันอาจอยู่ในเบราว์เซอร์อื่น .. ดังนั้นฉันคิดว่ามันจะดีกว่าถ้าคุณไม่สนใจความคิดเห็นของฉัน ..
— Toni Michel Caubet
@ToniMichelCaubet ah, ตกลงอาจเป็นปัญหา CDN แล้ว ขอตรวจสอบดูก่อน.
— Ciro Santilli 法轮功冠状病六四事件法轮功
autosizeปลั๊กอินไม่อนุญาตให้มีการปรับขนาดด้วยตนเองโดยใช้ไอคอนปรับขนาดใน textarea
— j4v1
6

มีใครคิดว่าเป็นที่พอใจหรือไม่ ไม่ยุ่งกับการเลื่อนและเป็น JS เดียวที่ฉันชอบเกี่ยวกับมันคือถ้าคุณวางแผนที่จะบันทึกข้อมูลในความเบลอ ... และเห็นได้ชัดว่ามันเข้ากันได้กับเบราว์เซอร์ยอดนิยมทั้งหมด: http://caniuse.com/#feat = contenteditable

เพียงแค่กำหนดสไตล์ให้ดูเหมือนกล่องข้อความและปรับขนาดอัตโนมัติ ... ทำให้ความสูงขั้นต่ำเป็นความสูงของข้อความที่ต้องการและมีความสูง

สิ่งที่ยอดเยี่ยมเกี่ยวกับวิธีการนี้คือคุณสามารถบันทึกและติดแท็กในเบราว์เซอร์บางตัวได้

http://jsfiddle.net/gbutiri/v31o8xfo/

<style>
.autoheight {
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    outline: none;
    width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
    var $this = $(this);
    // The text is here. Do whatever you want with it.
    console.log($this.html());
});

</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey Mouse</div>
— ผู้ดูแลเว็บ G
แหล่งที่มา
Chrome จะเพิ่มองค์ประกอบ <div> ใน ENTER
— sbaechler
contenteditableเป็นสิ่งที่ดี แต่ถ้าคุณต้องการธรรมดาก็ต้องพวงของตัวเลือกเหมือนและ-webkit-user-modify: read-write-plaintext-only white-space: pre-wrap
— mik01aj
@_sbaechler: ก <div> s [dom-element].innerTextจะถูกตัดออกเมื่อใช้ @WebmasterG IMHO มันจะดีที่จะละเว้น jquery (เพื่อความโปร่งใส) และรวมถึงตัวอย่างในหน้านี้ผ่านทางส่วนย่อยของรหัสที่รันได้แทน jsfiddle
— adabru
4

ฉันใช้รหัสต่อไปนี้สำหรับ textareas หลายรายการ ทำงานได้ดีใน Chrome 12, Firefox 5 และ IE 9 แม้จะมีการดำเนินการลบตัดและวางใน textareas ก็ตาม

<!-- language: lang-html -->
<style type='text/css'>
textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee }
</style>
<textarea style='height:100px;font-family:arial' id="txt1"></textarea>
<textarea style='height:125px;font-family:arial' id="txt2"></textarea>
<textarea style='height:150px;font-family:arial' id="txt3"></textarea>
<textarea style='height:175px;font-family:arial' id="txt4"></textarea>
<script type='text/javascript'>
function attachAutoResizeEvents()
{   for(i=1;i<=4;i++)
    {   var txtX=document.getElementById('txt'+i)
        var minH=txtX.style.height.substr(0,txtX.style.height.indexOf('px'))
        txtX.onchange=new Function("resize(this,"+minH+")")
        txtX.onkeyup=new Function("resize(this,"+minH+")")
        txtX.onchange(txtX,minH)
    }
}
function resize(txtX,minH)
{   txtX.style.height = 'auto' // required when delete, cut or paste is performed
    txtX.style.height = txtX.scrollHeight+'px'
    if(txtX.scrollHeight<=minH)
        txtX.style.height = minH+'px'
}
window.onload=attachAutoResizeEvents
</script>
— Nikunj Bhatt
แหล่งที่มา
4

มีวิธีการที่แตกต่างกันเล็กน้อย

<div style="position: relative">
  <pre style="white-space: pre-wrap; word-wrap: break-word"></pre>
  <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

แนวคิดคือการคัดลอกข้อความจากtextareaลงในpreและให้ CSS ตรวจสอบให้แน่ใจว่าพวกเขามีขนาดเดียวกัน

ประโยชน์คือกรอบงานนำเสนอเครื่องมือง่ายๆในการย้ายข้อความโดยไม่ต้องแตะต้องเหตุการณ์ใด ๆ กล่าวคือใน AngularJS ที่คุณจะเพิ่มng-model="foo" ng-trim="false"ไปtextareaและไปng-bind="foo + '\n'" preดูซอ

เพียงให้แน่ใจว่ามีขนาดตัวอักษรเช่นเดียวกับpretextarea

— Karolis Juodelė
แหล่งที่มา
1
" ตรวจสอบให้แน่ใจว่าpreมีขนาดแบบอักษรเท่ากับtextarea " - พวกเขาต้องการเหมือนกันline-heightและจำนวนเท่ากันpaddingและ / หรือborderมากเกินไป นี่คือทางออกที่ดีที่สุดสำหรับเชิงมุม
— Jamie Barker
4

งานต่อไปนี้สำหรับการตัดการวางและอื่น ๆ ไม่ว่าการกระทำเหล่านั้นมาจากเมาส์แป้นพิมพ์ลัดการเลือกตัวเลือกจากแถบเมนู ... คำตอบหลายข้อใช้วิธีการที่คล้ายกัน แต่ไม่ได้คำนึงถึงกล่อง - การปรับขนาดซึ่งเป็นสาเหตุที่ทำให้สไตล์overflow: hiddenนั้นใช้ไม่ถูกต้อง

ฉันทำสิ่งต่อไปนี้ซึ่งทำงานได้ดีกับmax-heightและrowsสำหรับความสูงต่ำสุดและสูงสุด

function adjust() {
  var style = this.currentStyle || window.getComputedStyle(this);
  var boxSizing = style.boxSizing === 'border-box'
      ? parseInt(style.borderBottomWidth, 10) +
        parseInt(style.borderTopWidth, 10)
      : 0;
  this.style.height = '';
  this.style.height = (this.scrollHeight + boxSizing) + 'px';
};

var textarea = document.getElementById("ta");
if ('onpropertychange' in textarea) { // IE
  textarea.onpropertychange = adjust;
} else if ('oninput' in textarea) {
  textarea.oninput = adjust;
}
setTimeout(adjust.bind(textarea));
textarea {
  resize: none;
  max-height: 150px;
  border: 1px solid #999;
  outline: none;
  font: 18px sans-serif;
  color: #333;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}
<textarea rows="3" id="ta">
Try adding several lines to this.
</textarea>
ขยายตัวอย่างข้อมูล

เพื่อความสมบูรณ์แบบแน่นอนคุณควรเรียกใช้adjustฟังก์ชันในอีกสองสามกรณี:

  1. หน้าต่างปรับขนาดเหตุการณ์หากความกว้างของ textareaเปลี่ยนแปลงด้วยการปรับขนาดหน้าต่างหรือเหตุการณ์อื่น ๆ ที่เปลี่ยนความกว้างของ textarea
  2. เมื่อคุณสมบัติtextareaของdisplayสไตล์เปลี่ยนไปเช่นเมื่อมันเปลี่ยนไปnone (ซ่อน) เป็นblock
  3. เมื่อค่าของการtextareaเปลี่ยนแปลงทางโปรแกรม

โปรดทราบว่าการใช้window.getComputedStyleหรือรับcurrentStyleอาจมีค่าใช้จ่ายในการคำนวณค่อนข้างสูงดังนั้นคุณอาจต้องการแคชผลลัพธ์แทน

ใช้งานได้กับ IE6 ดังนั้นฉันหวังว่าจะมีการสนับสนุนที่ดีพอ

— Joseph Nields
แหล่งที่มา
4

คุณสามารถใช้ขนาด<span>ที่ปรับขนาดของมันโดยอัตโนมัติได้ คุณจะต้องทำให้สามารถแก้ไขได้โดยการเพิ่มcontenteditable="true"คุณสมบัติและทำเสร็จแล้ว:

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}
<div>
  <span contenteditable="true">This text can be edited by the user</span>
</div>
ขยายตัวอย่างข้อมูล

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

— Racil Hilan
แหล่งที่มา
มีคำตอบที่ใช้ contenteditable ในหน้านี้: stackoverflow.com/questions/454202/…
— adabru
@adabru ใช่ แต่คำตอบทั้งสองนั้นไม่เหมือนกัน โตโยต้าทำรถสีแดงและฟอร์ดก็ทำรถสีแดงด้วย แต่ต่างกันใช่มั้ย ถ้าคุณชอบคำตอบอื่น ๆ เพิ่มเติมไปกับมัน แต่มีคนที่ชื่นชมคำตอบของฉันมากขึ้นและไปกับมัน การมีตัวเลือกต่าง ๆ เป็นสิ่งที่ดี
— Racil Hilan
3

การแก้ไขเล็กน้อย ทำงานได้อย่างสมบูรณ์ใน Opera

  $('textarea').bind('keyup keypress', function() {
      $(this).height('');
      var brCount = this.value.split('\n').length;
      this.rows = brCount+1; //++ To remove twitching
      var areaH = this.scrollHeight,
          lineHeight = $(this).css('line-height').replace('px',''),
          calcRows = Math.floor(areaH/lineHeight);
      this.rows = calcRows;
  });
— artnik โปร
แหล่งที่มา
ทำงานตราบเท่าที่บรรทัดของคุณไม่ล้น - จากนั้นเส้นจะไม่พอดี
— Tomáš Kafka
ใช้งานได้ดีมาก (Firefox 72)
— Mikeys4u
2

ฉันรู้วิธีที่สั้นและถูกต้องในการดำเนินการนี้ด้วย jquery.No จำเป็นต้องมี div ที่ซ่อนอยู่เป็นพิเศษและทำงานในเบราว์เซอร์ส่วนใหญ่

<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});

</script>
jQuery's .live()เลิกใช้แล้ว api.jquery.com/liveโดยทั่วไปคุณจะต้องการใช้.on()แทน
— ลูกา
2

ฉันไม่รู้ว่าถ้าใครพูดถึงวิธีนี้ แต่ในบางกรณีก็เป็นไปได้ที่จะปรับขนาดความสูงด้วยแอตทริบิวต์แถว

textarea.setAttribute('rows',breaks);

การสาธิต

— h0mayun
แหล่งที่มา
1
white-space: nowrap;ที่ทำงานเฉพาะถ้าคุณมี เมื่อมีการตัดบรรทัดไปยังอีกบรรทัดหนึ่งโดยไม่มีการหยุดพักบรรทัด textarea จะไม่ถูกปรับอย่างเหมาะสมอีกต่อไป
— Yeti
2

นี่คือคำสั่ง angularjs สำหรับคำตอบของ panzi

 module.directive('autoHeight', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element = element[0];
                var resize = function(){
                    element.style.height = 'auto';
                    element.style.height = (element.scrollHeight)+'px';
                };
                element.addEventListener('change', resize, false);
                element.addEventListener('cut',    resize, false);
                element.addEventListener('paste',  resize, false);
                element.addEventListener('drop',   resize, false);
                element.addEventListener('keydown',resize, false);

                setTimeout(resize, 100);
            }
        };
    });

HTML:

<textarea ng-model="foo" auto-height></textarea>
— chrmcpn
แหล่งที่มา
คุณควรใช้ $ timeout มากกว่า setTimout ซึ่งจะช่วยให้แน่ใจว่าโมเดลได้รับการกำหนดค่าเริ่มต้น (ไม่จำเป็นต้องระบุมิลลิวินาที - มันจะถูกเรียกใช้หลังจากรอบการแยกย่อยแบบ Angular) องค์ประกอบ = องค์ประกอบ [0] ด้วย; เป็นการปฏิบัติที่แย่มาก ... อย่างไรก็ตามวิธีแก้ปัญหาก็ไม่ดีสำหรับฉันเพราะฉันต้องการให้ textarea เป็นบรรทัดเดียวจนกระทั่งมีข้อความมากขึ้น
— Karol Websky
2

คุณสามารถใช้ JQuery เพื่อขยายtextareaขณะพิมพ์:

$(document).find('textarea').each(function () {
  var offset = this.offsetHeight - this.clientHeight;

  $(this).on('keyup input focus', function () {
    $(this).css('height', 'auto').css('height', this.scrollHeight + offset);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
<textarea name="note"></textarea>
<div>
ขยายตัวอย่างข้อมูล

— เมาริซิโอซานเชซ
แหล่งที่มา
ทางออกที่สะอาดที่สุด แต่เราควรหยุดใช้ jQuery: textarea.addEventListener ('keyup', () => {textarea.style.height = 0; textarea.style.height = ${textarea.scrollHeight}px;});
— Toni Michel Caubet
2

ผู้ที่ต้องการประสบความสำเร็จใน Angular รุ่นใหม่

หยิบ textArea elementRef

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;

public autoShrinkGrow() {
    textArea.style.overflow = 'hidden';
    textArea.style.height = '0px';
    textArea.style.height = textArea.scrollHeight + 'px';
}

<textarea (keyup)="autoGrow()" #textArea></textarea>

ฉันยังเพิ่มกรณีการใช้งานอื่นที่อาจเป็นประโยชน์กับผู้ใช้บางคนที่อ่านเธรดเมื่อผู้ใช้ต้องการเพิ่มความสูงของพื้นที่ข้อความเป็นความสูงและจากนั้นoverflow:scrollก็สามารถทำได้

  public autoGrowShrinkToCertainHeight() {
    const textArea = this.textArea.nativeElement;
    if (textArea.scrollHeight > 77) {
      textArea.style.overflow = 'auto';
      return;
    }
    else {
      textArea.style.overflow = 'hidden';
      textArea.style.height = '0px';
      textArea.style.height = textArea.scrollHeight + 'px';
    }
  }
— Divyanshu Rawat
แหล่งที่มา
1

คำตอบบางส่วนของที่นี่ไม่ได้หมายถึงการแพ็ด

สมมติว่าคุณมี maxHeight คุณไม่ต้องการไปมากกว่านี้ได้ผลกับฉัน:

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don't leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don't want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener('input', adjust);
— hasen
แหล่งที่มา
1

วิธีที่ง่ายกว่าและสะอาดกว่านี้คือ: 

// adjust height of textarea.auto-height
$(document).on( 'keyup', 'textarea.auto-height', function (e){
    $(this).css('height', 'auto' ); // you can have this here or declared in CSS instead
    $(this).height( this.scrollHeight );
}).keyup();

// และ CSS

textarea.auto-height {
    resize: vertical;
    max-height: 600px; /* set as you need it */
    height: auto;      /* can be set here of in JS */
    overflow-y: auto;
    word-wrap:break-word
}

สิ่งที่จำเป็นคือการเพิ่ม.auto-heightชั้นเรียนให้กับสิ่งที่textareaคุณต้องการกำหนดเป้าหมาย

ทดสอบใน FF, Chrome และ Safari แจ้งให้เราทราบหากสิ่งนี้ไม่ได้ผลสำหรับคุณด้วยเหตุผลใดก็ตาม แต่นี่เป็นวิธีที่สะอาดและง่ายที่สุดที่ฉันพบว่าใช้งานได้ และใช้งานได้ดี! : D

— ฟื้น
แหล่งที่มา
คุณพยายามลบข้อความหลังจากแก้ไขหรือไม่? textarea ล่มสลายหรือไม่?
— 18C
1

รหัสนี้ใช้ได้กับการวางและเลือกลบด้วย 

onKeyPressTextMessage = function(){
			var textArea = event.currentTarget;
    	textArea.style.height = 'auto';
    	textArea.style.height = textArea.scrollHeight + 'px';
};
<textarea onkeyup="onKeyPressTextMessage(event)" name="welcomeContentTmpl" id="welcomeContent" onblur="onblurWelcomeTitle(event)" rows="2" cols="40" maxlength="320"></textarea>
ขยายตัวอย่างข้อมูล

นี่คือJSFiddle

— Kurenai Kunai
แหล่งที่มา
1

ผมขอแนะนำให้ห้องสมุดจาวาสคริปต์จากhttp://javierjulio.github.io/textarea-autosize

ตามความคิดเห็นเพิ่ม codeblock ตัวอย่างในการใช้งานปลั๊กอิน:

<textarea class="js-auto-size" rows="1"></textarea>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.textarea_autosize.min.js"></script>
<script>
$('textarea.js-auto-size').textareaAutoSize();
</script>

CSS ขั้นต่ำที่ต้องการ:

textarea {
  box-sizing: border-box;
  max-height: 160px; // optional but recommended
  min-height: 38px;
  overflow-x: hidden; // for Firefox (issue #5)
}
— orange01
แหล่งที่มา
1

MakeTextAreaResisable ที่ใช้ qQuery

function MakeTextAreaResisable(id) {
    var o = $(id);
    o.css("overflow-y", "hidden");

    function ResizeTextArea() {
        o.height('auto');
        o.height(o[0].scrollHeight);
    }

    o.on('change', function (e) {
        ResizeTextArea();
    });

    o.on('cut paste drop keydown', function (e) {
        window.setTimeout(ResizeTextArea, 0);
    });

    o.focus();
    o.select();
    ResizeTextArea();
}
— Igor Krupitsky
แหล่งที่มา
1

ดูเหมือนว่าคำตอบจะไม่ทำงาน แต่อันนี้ใช้ได้สำหรับฉัน: https://coderwall.com/p/imkqoq/resize-textarea-to-fit-content

$('#content').on( 'change keyup keydown paste cut', 'textarea', function (){
    $(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();
— Kim Homann
แหล่งที่มา
นี่ควรเป็นคำตอบที่ได้รับการยอมรับแม้ว่าจะเพียงพอที่จะรับฟังเหตุการณ์ "keyup"
— Bob Ross
1

การติดตั้งใช้งานง่ายมากนับจำนวนบรรทัดในอินพุต (และ 2 แถวขั้นต่ำเพื่อแสดงว่าเป็น textarea):

textarea.rows = Math.max(2, textarea.value.split("\n").length) // # oninput

ตัวอย่างการทำงานที่เต็มไปด้วยสิ่งเร้า: https://jsbin.com/kajosolini/1/edit?html,js,output

(และใช้งานได้กับมือจับปรับขนาดเบราว์เซอร์ด้วยตนเองเช่น)

— localhostdotdev
แหล่งที่มา
2
ใช้งานได้ก็ต่อเมื่อคุณแบ่งบรรทัดโดยการกด "Enter" หากข้อความของคุณยาวเกินความกว้างของ textarea แต่คุณไม่กด "Enter" ข้อความนั้นจะไม่ขยาย
— Nathalia Xavier
1

คำตอบที่ยอมรับใช้งานได้ดี แต่นั่นเป็นรหัสจำนวนมากสำหรับฟังก์ชั่นง่าย ๆ นี้ รหัสด้านล่างจะทำเคล็ดลับ

   $(document).on("keypress", "textarea", function (e) {
    var height = $(this).css("height");
    var iScrollHeight = $(this).prop("scrollHeight");
    $(this).css('height',iScrollHeight);
    });
— karthik_krish
แหล่งที่มา
0

นี่คือสิ่งที่ฉันทำในขณะที่ใช้ MVC HTML Helper สำหรับ TextArea ฉันมีองค์ประกอบ textarea ค่อนข้างน้อยดังนั้นต้องแยกความแตกต่างโดยใช้ Model Id

 @Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })

และในสคริปต์เพิ่มสิ่งนี้: 

   function resizeTextBox(ID) {            
        var text = document.getElementById('text' + ID);
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';            
    }

ฉันได้ทำการทดสอบกับ IE10 และ Firefox23 แล้ว

— gunnerz
แหล่งที่มา
0

คุณสามารถใช้รหัสนี้:

Coffescript:

jQuery.fn.extend autoHeightTextarea: ->
  autoHeightTextarea_ = (element) ->
    jQuery(element).css(
      'height': 'auto'
      'overflow-y': 'hidden').height element.scrollHeight

  @each ->
    autoHeightTextarea_(@).on 'input', ->
      autoHeightTextarea_ @

$('textarea_class_or_id`').autoHeightTextarea()

จาวาสคริ

jQuery.fn.extend({
  autoHeightTextarea: function() {
    var autoHeightTextarea_;
    autoHeightTextarea_ = function(element) {
      return jQuery(element).css({
        'height': 'auto',
        'overflow-y': 'hidden'
      }).height(element.scrollHeight);
    };
    return this.each(function() {
      return autoHeightTextarea_(this).on('input', function() {
        return autoHeightTextarea_(this);
      });
    });
  }
});

$('textarea_class_or_id`').autoHeightTextarea();
— Darex1991
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.