จะปรับขนาดพื้นที่ข้อความอัตโนมัติโดยใช้ Prototype ได้อย่างไร?

121

ฉันกำลังทำงานเกี่ยวกับแอปพลิเคชันการขายภายในของ บริษัท ที่ฉันทำงานและฉันมีแบบฟอร์มที่อนุญาตให้ผู้ใช้เปลี่ยนที่อยู่ในการจัดส่งได้

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

นี่คือภาพหน้าจอของมันในขณะนี้

ที่อยู่ ISO

ความคิดใด ๆ ?

@ Chris

เป็นจุดที่ดี แต่มีเหตุผลที่ฉันต้องการปรับขนาด ฉันต้องการให้พื้นที่นั้นเป็นพื้นที่ของข้อมูลที่อยู่ในนั้น อย่างที่คุณเห็นในภาพหน้าจอถ้าฉันมีพื้นที่ข้อความคงที่จะต้องใช้พื้นที่แนวตั้งพอสมควร

ฉันสามารถลดแบบอักษรได้ แต่ฉันต้องการที่อยู่ให้ใหญ่และอ่านได้ ตอนนี้ฉันสามารถลดขนาดของพื้นที่ข้อความได้แล้ว แต่ฉันมีปัญหากับคนที่มีบรรทัดที่อยู่ที่ใช้ 3 หรือ 4 (หนึ่งใช้เวลา 5) บรรทัด จำเป็นต้องให้ผู้ใช้ใช้แถบเลื่อนถือเป็นข้อห้ามที่สำคัญ

ฉันเดาว่าฉันควรจะเจาะจงมากกว่านี้ ฉันหลังจากปรับขนาดตามแนวตั้งแล้วและความกว้างก็ไม่สำคัญเท่า ปัญหาเดียวที่เกิดขึ้นกับสิ่งนั้นคือหมายเลข ISO ("1" ขนาดใหญ่) ถูกดันเข้าไปใต้ที่อยู่เมื่อความกว้างของหน้าต่างเล็กเกินไป (ดังที่คุณเห็นในภาพหน้าจอ)

ไม่เกี่ยวกับการมี gimick; เกี่ยวกับการมีช่องข้อความที่ผู้ใช้สามารถแก้ไขได้ซึ่งจะไม่ใช้เนื้อที่ที่ไม่จำเป็น แต่จะแสดงข้อความทั้งหมดในนั้น

แม้ว่าจะมีคนคิดวิธีอื่นในการแก้ไขปัญหาฉันก็เปิดรับเช่นกัน

ฉันได้แก้ไขโค้ดเล็กน้อยเพราะมันดูแปลกไปหน่อย ฉันเปลี่ยนเป็นเปิดใช้งานเมื่อคีย์อัพเพราะมันจะไม่คำนึงถึงอักขระที่เพิ่งพิมพ์

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

— ไมค์
แหล่งที่มา

คุณสามารถสร้างไซต์สาธิตที่เราสามารถดูได้ในที่ทำงานหรือไม่?

— Einar Ólafsson

3

ปลั๊กอินนี้ดูเหมือนว่าดีjacklmoore.com/autosize

— Gaurav Shah

มี JQuery verion หรือไม่? วิธีเข้าถึง cols และแถวของ TextArea ใน JQuery

— Zach

เกือบจะเหมือนกัน แต่มีข้อกำหนดที่ชัดเจนว่าควรเล็กลงเมื่อลบข้อความ: stackoverflow.com/questions/454202/…

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

75

Facebook ทำได้เมื่อคุณเขียนบนกำแพงของผู้คน แต่ปรับขนาดในแนวตั้งเท่านั้น

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

ไม่มีมือใหม่ที่ใช้ Facebook ที่ฉันรู้ว่าเคยพูดถึงเรื่องนี้หรือสับสน ฉันจะใช้สิ่งนี้เป็นหลักฐานเล็กน้อยเพื่อบอกว่า 'ไปข้างหน้า, ใช้มัน'

โค้ด JavaScript บางส่วนที่ต้องทำโดยใช้Prototype (เพราะนั่นคือสิ่งที่ฉันคุ้นเคย):

<!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: เห็นได้ชัดว่าโค้ด JavaScript นี้ไร้เดียงสามากและไม่ได้รับการทดสอบอย่างดีและคุณอาจไม่ต้องการใช้ในกล่องข้อความที่มีนวนิยายอยู่ในนั้น แต่คุณได้รับแนวคิดทั่วไป

— Orion Edwards
แหล่งที่มา

2

สิ่งนี้จะถือว่าเบราว์เซอร์แตกที่อักขระใด ๆ ซึ่งไม่ถูกต้อง <textarea cols='5'>0 12345 12345 0</textarea>ลองบน (ฉันเขียนการใช้งานที่เหมือนกันเกือบทั้งหมดและไม่สามารถจับสิ่งนี้ได้จนกว่าจะใช้งานได้หนึ่งเดือน) นอกจากนี้ยังล้มเหลวสำหรับบรรทัดว่าง

— st-boost

มีเวอร์ชั่น JQuery สำหรับสิ่งนี้หรือไม่?

— emeraldhieu

แบ็กสแลชใน $ A (str.split ("\ n")) ต้องการอีก (การแก้ไขคำตอบข้างต้นของฉันไม่รอดด้วยเหตุผลบางประการ)

— gherson

67

การปรับแต่งอย่างหนึ่งของคำตอบเหล่านี้คือการปล่อยให้ CSS ทำงานได้มากขึ้น

เส้นทางพื้นฐานน่าจะเป็น:

สร้างองค์ประกอบคอนเทนเนอร์เพื่อเก็บtextareaและซ่อนdiv
ใช้ Javascript เก็บtextareaของเนื้อหาซิงค์กับdiv's
ปล่อยให้เบราว์เซอร์ทำการคำนวณความสูงของ div นั้น
เนื่องจากเบราว์เซอร์จัดการการแสดงผล / ปรับขนาดสิ่งที่ซ่อนอยู่divเราจึงหลีกเลี่ยงการตั้งค่าtextareaความสูงอย่างชัดเจน

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}

html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
}

<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>

ขยายข้อมูลโค้ด

— Jan Miksovsky
แหล่งที่มา

5

นี่คือทางออกที่ยอดเยี่ยม! ข้อแม้เดียวคือเบราว์เซอร์ที่ไม่รองรับการกำหนดขนาดกล่อง (IE <7) จะคำนวณความกว้างไม่ถูกต้องดังนั้นคุณจะสูญเสียความแม่นยำไปบ้าง แต่ถ้าคุณปล่อยให้มีพื้นที่ว่างในตอนท้าย คุณควรจะยังคงโอเค รักมันแน่นอนสำหรับความเรียบง่าย

— Antonio Salazar Cardozo

4

ฉันมีอิสระในการใช้โซลูชันนี้เป็นปลั๊กอิน jQuery แบบสแตนด์อโลนที่ใช้งานง่ายโดยไม่ต้องใช้มาร์กอัปหรือสไตล์ xion.io/jQuery.xarea เผื่อมีคนใช้ :)

— Xion

2

การตั้งค่า textCopy เป็น hidden ยังคงช่วยให้ div ที่ซ่อนอยู่ใช้พื้นที่ในมาร์กอัปเพื่อให้เนื้อหา textCopy ใหญ่ขึ้นในที่สุดคุณจะได้แถบเลื่อนตามความยาวทั้งหมดของหน้า ...

— topwik

1

อีกหนึ่งการปรับแต่งที่ดีสำหรับสิ่งนี้ var text = $("#textArea").val().replace(/\n/g, '<br/>') + ' ';ตรวจสอบให้แน่ใจว่าคุณจะไม่เกิดพฤติกรรมกระตุกเมื่อเปลี่ยนจากบรรทัดใหม่ที่ว่างเปล่าที่ส่วนท้ายของพื้นที่ข้อความไปยังบรรทัดที่ไม่ว่างเปล่าเนื่องจาก div ที่ซ่อนอยู่จะทำให้แน่ใจว่าจะรวมเข้ากับ nbsp

— โดยไม่รู้ตัวใน

1

@ เรียกร้องให้เพิ่ม "& nbsp;" เพื่อกำจัดขนาดที่เพิ่มขึ้นอย่างกะทันหันเมื่อคุณเพิ่มตัวอักษรตัวแรกในบรรทัดใหม่ - สำหรับฉันแล้วมันเสียถ้าไม่มีสิ่งนี้ - ควรเพิ่มคำตอบ!

— davnicwil

40

นี่คืออีกเทคนิคหนึ่งในการปรับขนาดพื้นที่ข้อความอัตโนมัติ

ใช้ความสูงของพิกเซลแทนความสูงของเส้น: จัดการการตัดบรรทัดได้แม่นยำยิ่งขึ้นหากใช้แบบอักษรตามสัดส่วน
ยอมรับ ID หรือองค์ประกอบเป็นอินพุต
ยอมรับพารามิเตอร์ความสูงสูงสุดที่เป็นทางเลือกซึ่งมีประโยชน์หากคุณไม่ต้องการให้พื้นที่ข้อความขยายเกินขนาดที่กำหนด (เก็บไว้บนหน้าจอทั้งหมดหลีกเลี่ยงเค้าโครงที่เสียหาย ฯลฯ )
ทดสอบบน Firefox 3 และInternet Explorer 6

รหัส: (JavaScript วานิลลาธรรมดา)

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: (ใช้ jQuery เป้าหมายบนพื้นที่ข้อความที่ฉันกำลังพิมพ์อยู่ตอนนี้ - หากคุณติดตั้งFirebugให้วางตัวอย่างทั้งสองลงในคอนโซลและทดสอบในหน้านี้)

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

— Shog9
แหล่งที่มา

@SMB - นั่นอาจจะไม่ยากเกินไปที่จะนำไปใช้เพียงแค่เพิ่มเงื่อนไขอื่น

— Jason

@ Jason: เมื่อข้อความในช่องไม่เต็มclientHeightและscrollHeightเท่ากันดังนั้นคุณจึงไม่สามารถใช้วิธีนี้ได้หากคุณต้องการให้พื้นที่ข้อความของคุณหดและเติบโต

— Brant Bobby

หากต้องการย่อขนาดให้คุณต้องเพิ่มรหัสนี้ก่อนบรรทัดที่ 6:if (text.clientHeight == text.scrollHeight) text.style.height = "20px";

— Gapipro

14

อาจเป็นวิธีแก้ปัญหาที่สั้นที่สุด:

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

ด้วยวิธีนี้คุณไม่จำเป็นต้องมี div ที่ซ่อนอยู่หรืออะไรแบบนั้น

หมายเหตุ: คุณอาจต้องเล่นด้วยthis.style.height = (this.scrollHeight) + "px";ขึ้นอยู่กับว่าคุณจัดรูปแบบพื้นที่ข้อความอย่างไร (ความสูงบรรทัดช่องว่างภายในและประเภทของสิ่งนั้น)

— Eduard Luca
แหล่งที่มา

ทางออกที่ดีที่สุดหากคุณไม่คิดว่าแถบเลื่อนจะกะพริบ

— cfillol

มันจะเพียงพอกับการจับเฉพาะเหตุการณ์คีย์อัพ คุณไม่คิดอย่างนั้นเหรอ?

— cfillol

2

ตั้งค่าคุณสมบัติ textarea overflow เป็น "hidden" เพื่อหลีกเลี่ยงการกะพริบของแถบเลื่อน

— cfillol

keyupน่าจะเพียงพอ แต่ฉันไม่แน่ใจ ฉันมีความสุขมากที่ฉันคิดออกและหยุดพยายามอย่างอื่น

— Eduard Luca

ฉันยังคงพยายามเรียนรู้ว่าทำไมคุณถึงเพิ่ม this.style.height = "1px"; หรือ this.style.height = "อัตโนมัติ"; ก่อน. ฉันรู้ว่า textarea จะไม่ปรับขนาดเมื่อเราลบเนื้อหาถ้าเราไม่เพิ่มบรรทัดนี้ มีใครช่วยอธิบายได้ไหม

— Balasubramani M

8

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

//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options)
  {
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function()
  { 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
  }
});

สร้างวิดเจ็ตโดยโทร new Widget.Textarea('element_id')สร้างเครื่องมือโดยการเรียกnew Widget.Textarea('element_id', { max_length: 600, min_height: 50})ตัวเลือกการเริ่มต้นสามารถแทนที่โดยผ่านพวกเขาเป็นวัตถุเช่น หากคุณต้องการสร้างมันสำหรับพื้นที่ข้อความทั้งหมดในเพจให้ทำสิ่งต่อไปนี้

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

— Jeremy Kauffman
แหล่งที่มา

7

นี่คือวิธีแก้ปัญหาด้วยJQuery:

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

abcคือteaxtarea.

— memical
แหล่งที่มา

5

ตรวจสอบลิงค์ด้านล่าง: 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
    });
});

— เกียง
แหล่งที่มา

ลิงค์ตาย. รหัสอยู่ที่นี่james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/…

— Matthew Hui

3

เพียงแค่ทบทวนสิ่งนี้ฉันได้ทำให้มันเป็นระเบียบขึ้นเล็กน้อย (แม้ว่าคนที่เต็มขวดในPrototype / JavaScript สามารถแนะนำการปรับปรุงได้)

var TextAreaResize = Class.create();
TextAreaResize.prototype = {
  initialize: function(element, options) {
    element = $(element);
    this.element = element;

    this.options = Object.extend(
      {},
      options || {});

    Event.observe(this.element, 'keyup',
      this.onKeyUp.bindAsEventListener(this));
    this.onKeyUp();
  },

  onKeyUp: function() {
    // We need this variable because "this" changes in the scope of the
    // function below.
    var cols = this.element.cols;

    var linecount = 0;
    $A(this.element.value.split("\n")).each(function(l) {
      // We take long lines into account via the cols divide.
      linecount += 1 + Math.floor(l.length / cols);
    })

    this.element.rows = linecount;
  }
}

เพียงแค่โทรด้วย:

new TextAreaResize('textarea_id_name_here');

— ไมค์
แหล่งที่มา

3

ฉันได้ทำสิ่งที่ค่อนข้างง่าย ก่อนอื่นฉันใส่ TextArea ลงใน DIV ประการที่สองฉันได้เรียกใช้readyฟังก์ชันนี้กับสคริปต์นี้

<div id="divTable">
  <textarea ID="txt" Rows="1" TextMode="MultiLine" />
</div>

$(document).ready(function () {
  var heightTextArea = $('#txt').height();
  var divTable = document.getElementById('divTable');
  $('#txt').attr('rows', parseInt(parseInt(divTable .style.height) / parseInt(altoFila)));
});

ง่าย เป็นความสูงสูงสุดของ div เมื่อแสดงผลหารด้วยความสูงของ TextArea หนึ่งแถว

— เอดูอาร์โดมวล
แหล่งที่มา

2

ฉันต้องการฟังก์ชันนี้สำหรับตัวเอง แต่ไม่มีฟังก์ชั่นใดจากที่นี่ทำงานได้ตามที่ฉันต้องการ

ดังนั้นฉันจึงใช้รหัสของ Orion และเปลี่ยนมัน

ฉันเพิ่มความสูงขั้นต่ำเพื่อไม่ให้มีการทำลายล้างน้อยเกินไป

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

— ปีเตอร์มอร์เทนเซน
แหล่งที่มา

2

ชอบคำตอบของ @memical

อย่างไรก็ตามฉันพบการปรับปรุงบางอย่าง คุณสามารถใช้height()ฟังก์ชันjQuery แต่ระวังพิกเซลด้านบนและด้านล่างของช่องว่างภายใน มิฉะนั้นพื้นที่ข้อความของคุณจะเติบโตเร็วเกินไป

$(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
แหล่งที่มา

2

วิธีแก้ปัญหาของฉันที่ไม่ใช้ jQuery (เพราะบางครั้งไม่จำเป็นต้องเหมือนกัน) อยู่ด้านล่าง แม้ว่าจะได้รับการทดสอบในInternet Explorer 7เท่านั้นดังนั้นชุมชนจึงสามารถชี้สาเหตุทั้งหมดนี้ผิดได้:

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

จนถึงตอนนี้ฉันชอบวิธีการทำงานมากและฉันไม่สนใจเบราว์เซอร์อื่น ๆ ดังนั้นฉันอาจจะใช้กับพื้นที่ข้อความทั้งหมดของฉัน:

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

— user1566694
แหล่งที่มา

1

นี่คือส่วนขยายของวิดเจ็ต Prototype ที่ Jeremy โพสต์เมื่อวันที่ 4 มิถุนายน:

จะหยุดไม่ให้ผู้ใช้ป้อนอักขระเพิ่มเติมหากคุณใช้ขีด จำกัด ในพื้นที่ข้อความ ตรวจสอบว่ามีอักขระเหลืออยู่หรือไม่ หากผู้ใช้คัดลอกข้อความลงในพื้นที่ข้อความข้อความจะถูกตัดออกสูงสุด ความยาว:

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

— ลิงลอเรม
แหล่งที่มา

1

@memicalมีโซลูชันที่ยอดเยี่ยมสำหรับการตั้งค่าความสูงของ textarea บน pageload ด้วย jQuery แต่สำหรับแอปพลิเคชันของฉันฉันต้องการเพิ่มความสูงของพื้นที่ข้อความเนื่องจากผู้ใช้เพิ่มเนื้อหามากขึ้น ฉันสร้างโซลูชันของ memical ด้วยสิ่งต่อไปนี้:

$(document).ready(function() {
    var $textarea = $("p.body textarea");
    $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
    $textarea.keyup(function(){
        var current_height = $textarea.css("height").replace("px", "")*1;
        if (current_height + 5 <= $textarea.attr("scrollHeight")) {
            $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
        }
    });
});

มันไม่ได้ราบรื่นมากนัก แต่ก็ไม่ใช่แอปพลิเคชันสำหรับลูกค้าด้วยดังนั้นความราบรื่นจึงไม่สำคัญ (หากสิ่งนี้เป็นไคลเอนต์ฉันอาจเพิ่งใช้ปลั๊กอิน jQuery ปรับขนาดอัตโนมัติ)

— WNRosenberg
แหล่งที่มา

1

สำหรับผู้ที่กำลังเขียนโค้ดสำหรับ IE และพบปัญหานี้ IE มีเคล็ดลับเล็กน้อยที่ทำให้เป็น CSS 100%

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

คุณสามารถระบุค่าสำหรับ row = "n" ซึ่ง IE จะละเว้น แต่เบราว์เซอร์อื่นจะใช้ ฉันเกลียดการเข้ารหัสที่ใช้ IE แฮ็ก แต่อันนี้มีประโยชน์มาก เป็นไปได้ว่ามันใช้งานได้ในโหมด Quirks เท่านั้น

— Einstein47
แหล่งที่มา

1

Internet Explorer, Safari, Chrome และ Operaต้องจำไว้ว่าต้องตั้งค่าความสูงบรรทัดใน CSS อย่างชัดเจน ฉันสร้างสไตล์ชีตที่ตั้งค่าความเหมาะสมเริ่มต้นสำหรับกล่องข้อความทั้งหมดดังนี้

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

— แลร์รี่
แหล่งที่มา

1

นี่คือฟังก์ชั่นที่ฉันเพิ่งเขียนใน jQuery เพื่อทำ - คุณสามารถพอร์ตไปยังPrototype ได้ได้ แต่มันไม่รองรับ "ความเป็นอยู่" ของ jQuery ดังนั้นองค์ประกอบที่เพิ่มโดยคำขอของ Ajax จะไม่ตอบสนอง

เวอร์ชันนี้ไม่เพียง แต่ขยาย แต่ยังทำสัญญาเมื่อกดลบหรือแบ็กสเปซ

เวอร์ชันนี้อาศัย jQuery 1.4.2

สนุก ;)

http://pastebin.com/SUKeBtnx

การใช้งาน:

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

หรือ (เช่นตัวเลือก jQuery ใด ๆ )

$("textarea").textareacontrol();

ได้รับการทดสอบบนInternet Explorer 7 / Internet Explorer 8 , Firefox 3.5 และ Chrome ทั้งหมดทำงานได้ดี

— อเล็กซ์
แหล่งที่มา

1

ใช้ ASP.NET เพียงแค่ทำสิ่งนี้:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Automatic Resize TextBox</title>
        <script type="text/javascript">
            function setHeight(txtarea) {
                txtarea.style.height = txtdesc.scrollHeight + "px";
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine"  onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
        </form>
    </body>
</html>

— Pat Murray
แหล่งที่มา