Làm cách nào để tự động kích thước một vùng văn bản bằng Prototype?


121

Tôi hiện đang làm việc trên một ứng dụng bán hàng nội bộ cho công ty tôi đang làm việc và tôi có một biểu mẫu cho phép người dùng thay đổi địa chỉ giao hàng.

Bây giờ tôi nghĩ nó sẽ trông đẹp hơn nhiều, nếu văn bản tôi đang sử dụng cho các chi tiết địa chỉ chính sẽ chỉ chiếm diện tích của văn bản trong đó và tự động thay đổi kích thước nếu văn bản bị thay đổi.

Đây là ảnh chụp màn hình của nó hiện tại.

Địa chỉ ISO

Có ý kiến ​​gì không?


@Chris

Một điểm tốt, nhưng có những lý do tôi muốn nó thay đổi kích thước. Tôi muốn khu vực nó chiếm là khu vực thông tin có trong đó. Như bạn có thể thấy trong ảnh chụp màn hình, nếu tôi có một vùng văn bản cố định, nó sẽ chiếm một lượng lớn không gian dọc.

Tôi có thể giảm phông chữ, nhưng tôi cần địa chỉ lớn và dễ đọc. Bây giờ tôi có thể giảm kích thước của vùng văn bản, nhưng sau đó tôi gặp sự cố với những người có dòng địa chỉ mất 3 hoặc 4 (một dòng mất 5) dòng. Cần để người dùng sử dụng thanh cuộn là một điều tối kỵ.

Tôi đoán tôi nên cụ thể hơn một chút. Tôi đang theo đuổi việc thay đổi kích thước theo chiều dọc và chiều rộng không quan trọng bằng. Vấn đề duy nhất xảy ra với điều đó, là số ISO ("1" lớn) bị đẩy xuống dưới địa chỉ khi chiều rộng cửa sổ quá nhỏ (như bạn có thể thấy trên ảnh chụp màn hình).

Nó không phải là để có một gimick; đó là về việc có một trường văn bản mà người dùng có thể chỉnh sửa sẽ không chiếm dung lượng không cần thiết, nhưng sẽ hiển thị tất cả văn bản trong đó.

Mặc dù nếu ai đó nghĩ ra một cách khác để tiếp cận vấn đề, tôi cũng sẵn sàng giải quyết vấn đề đó.


Tôi đã sửa đổi mã một chút vì nó hoạt động hơi kỳ lạ. Tôi đã thay đổi nó thành kích hoạt khi gõ phím, vì nó sẽ không tính đến ký tự vừa được nhập.

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

Bạn có thể tạo một trang demo để chúng tôi có thể xem điều này tại nơi làm việc không?
Einar Ólafsson

3
Plugin này có vẻ tốt jacklmoore.com/autosize
Gaurav Shah

Có xác minh JQuery không? Làm cách nào để truy cập cột và hàng của TextArea trong JQuery?
Zach

Gần giống nhau, nhưng với yêu cầu rõ ràng sẽ nhỏ hơn khi văn bản bị xóa: stackoverflow.com/questions/454202/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Câu trả lời:


75

Facebook làm điều đó, khi bạn viết trên tường của mọi người, nhưng chỉ thay đổi kích thước theo chiều dọc.

Thay đổi kích thước theo chiều ngang gây cho tôi một mớ hỗn độn, do có nhiều từ, các dòng dài, v.v., nhưng thay đổi kích thước theo chiều dọc có vẻ khá an toàn và đẹp mắt.

Không ai trong số những người mới sử dụng Facebook mà tôi biết đã từng đề cập bất cứ điều gì về nó hoặc cảm thấy bối rối. Tôi muốn sử dụng điều này như một bằng chứng giai thoại để nói rằng 'hãy tiếp tục, thực hiện nó'.

Một số mã JavaScript để làm điều đó, sử dụng Prototype (vì đó là những gì tôi quen thuộc):

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

Tái bút: Rõ ràng mã JavaScript này rất ngây thơ và chưa được kiểm tra tốt, và bạn có thể không muốn sử dụng nó trên các hộp văn bản có tiểu thuyết trong đó, nhưng bạn có thể hiểu được ý kiến ​​chung.


2
Điều này giả sử trình duyệt bị ngắt ở bất kỳ ký tự nào, điều này không chính xác. Hãy thử nó trên <textarea cols='5'>0 12345 12345 0</textarea>. (Tôi đã viết một cách triển khai gần như giống hệt nhau và không hiểu được điều này cho đến sau một tháng sử dụng nó.) Nó cũng không thành công với các dòng trống.
st-boost

Có phiên bản JQuery cho việc này không?
emeraldhieu

Dấu gạch chéo ngược trong $ A (str.split ("\ n")) cần một dấu gạch chéo ngược. (Chỉnh sửa của tôi về câu trả lời trên không tồn tại đối với một số lý do.)
gherson

67

Một cải tiến cho một số câu trả lời này là để CSS thực hiện nhiều công việc hơn.

Lộ trình cơ bản dường như là:

  1. Tạo phần tử vùng chứa để giữ textareavà ẩndiv
  2. Sử dụng Javascript, giữ cho textareanội dung của được đồng bộ hóa vớidiv ' s
  3. Để trình duyệt thực hiện công việc tính toán chiều cao của div đó
  4. Bởi vì trình duyệt xử lý hiển thị / định kích thước ẩn div, chúng tôi tránh đặt textareachiều cao của ' một cách rõ ràng .

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>


5
Đây là một giải pháp tuyệt vời! Lưu ý duy nhất là các trình duyệt không hỗ trợ kích thước hộp (IE <7) sẽ không tính toán đúng chiều rộng và do đó bạn sẽ mất một số độ chính xác, nhưng nếu bạn để trống giá trị của một dòng ở cuối, bạn vẫn sẽ ổn. Chắc chắn thích nó vì sự đơn giản.
Antonio Salazar Cardozo

4
Tôi đã tự do triển khai giải pháp này như một plugin jQuery độc lập, đơn giản để sử dụng, không cần đánh dấu hoặc tạo kiểu. xion.io/jQuery.xarea trong của trường hợp ai đó có thể sử dụng nó :)
Xion

2
thiết textCopy để ẩn vẫn cho phép người div ẩn để chiếm không gian trong đánh dấu như vậy là các nội dung textCopy có được lớn hơn, bạn cuối cùng sẽ nhận được một thanh cuộn dọc theo toàn bộ chiều dài của trang của bạn ...
topwik

1
Một tinh chỉnh tốt khác cho điều này; var text = $("#textArea").val().replace(/\n/g, '<br/>') + '&nbsp;';đảm bảo rằng bạn không bị giật khi đi từ một dòng mới trống ở cuối textarea sang dòng khác không trống, vì div ẩn đảm bảo sẽ quấn vào nbsp.
vô tình vào

1
@unwitting tuyệt vời khi thêm '& nbsp;' để loại bỏ sự gia tăng kích thước đột ngột đó khi bạn thêm chữ cái đầu tiên vào một dòng mới - đối với tôi nó bị hỏng nếu không có điều này - điều này sẽ được thêm vào câu trả lời!
davnicwil

40

Đây là một kỹ thuật khác để tự động điều chỉnh kích thước một vùng văn bản.

  • Sử dụng chiều cao pixel thay vì chiều cao dòng: xử lý dòng bao phủ chính xác hơn nếu sử dụng phông chữ tỷ lệ.
  • Chấp nhận ID hoặc phần tử làm đầu vào
  • Chấp nhận thông số chiều cao tối đa tùy chọn - hữu ích nếu bạn không muốn để vùng văn bản phát triển vượt quá một kích thước nhất định (giữ tất cả trên màn hình, tránh phá vỡ bố cục, v.v.)
  • Đã thử nghiệm trên Firefox 3 và Internet Explorer 6

Mã: (JavaScript vani đơn giản)

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: (sử dụng jQuery, mục tiêu trên vùng văn bản mà tôi đang nhập vào ngay bây giờ - nếu bạn đã cài đặt Firebug , hãy dán cả hai mẫu vào bảng điều khiển và thử nghiệm trên trang này)

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

@SMB - điều đó có lẽ không quá khó để thực hiện, chỉ cần thêm một điều kiện khác
Jason

@Jason: Khi văn bản trong hộp không lấp đầy clientHeightscrollHeightbằng nhau, vì vậy bạn không thể sử dụng phương pháp này nếu bạn muốn vùng văn bản của mình thu nhỏ cũng như lớn lên.
Brant Bobby

Chỉ đơn giản là làm cho nó co lại đến, bạn chỉ cần thêm đoạn mã này trước khi dòng 6:if (text.clientHeight == text.scrollHeight) text.style.height = "20px";
Gapipro

14

Có lẽ là giải pháp ngắn nhất:

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

Bằng cách này, bạn không cần bất kỳ div ẩn hoặc bất kỳ thứ gì tương tự.

Lưu ý: bạn có thể phải thử this.style.height = (this.scrollHeight) + "px";tùy thuộc vào cách bạn tạo kiểu cho vùng văn bản (chiều cao dòng, phần đệm và loại nội dung đó).


Giải pháp tốt nhất nếu bạn không ngại thanh cuộn nhấp nháy.
cfillol

Chỉ cần bắt sự kiện keyup là đủ. Bạn có nghĩ vậy không?
cfillol

2
Đặt thuộc tính tràn textarea thành "ẩn" để tránh nhấp nháy thanh cuộn.
cfillol

keyupcó thể là đủ, nhưng tôi không chắc. Tôi rất vui vì tôi đã tìm ra nó, rằng tôi đã ngừng thử bất cứ điều gì khác.
Eduard Luca

Tôi vẫn đang cố gắng tìm hiểu lý do tại sao bạn thêm this.style.height = "1px"; hoặc this.style.height = "auto"; trước. Tôi biết rằng, textarea sẽ không thay đổi kích thước khi chúng tôi xóa nội dung nếu chúng tôi không thêm dòng này. Ai đó có thể quan tâm để giải thích?
Balasubramani M

8

Đây là phiên bản Nguyên mẫu của việc thay đổi kích thước vùng văn bản không phụ thuộc vào số cột trong vùng văn bản. Đây là một kỹ thuật ưu việt vì nó cho phép bạn kiểm soát vùng văn bản thông qua CSS cũng như có vùng văn bản có chiều rộng thay đổi. Ngoài ra, phiên bản này hiển thị số ký tự còn lại. Mặc dù không được yêu cầu nhưng đây là một tính năng khá hữu ích và dễ dàng bị xóa nếu không mong muốn.

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

Tạo tiện ích bằng cách gọi điện new Widget.Textarea('element_id'). Các tùy chọn mặc định có thể được ghi đè bằng cách chuyển chúng dưới dạng một đối tượng, ví dụ new Widget.Textarea('element_id', { max_length: 600, min_height: 50}). Nếu bạn muốn tạo nó cho tất cả các textareas trên trang, hãy làm như sau:

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

7

Đây là một giải pháp với JQuery:

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

abclà một teaxtarea.


5

Kiểm tra liên kết dưới đây: 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
    });
});


3

Chỉ cần xem lại điều này, tôi đã làm cho nó gọn gàng hơn một chút (mặc dù ai đó đã hiểu rõ về Prototype / JavaScript có thể đề xuất các cải tiến không?).

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

Chỉ cần nó gọi với:

new TextAreaResize('textarea_id_name_here');

3

Tôi đã làm một cái gì đó khá dễ dàng. Đầu tiên, tôi đặt TextArea vào DIV. Thứ hai, tôi đã gọi readyhàm cho tập lệnh này.

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

Đơn giản. Nó là chiều cao tối đa của div khi nó được hiển thị, chia cho chiều cao của một TextArea của một hàng.


2

Tôi cần chức năng này cho bản thân, nhưng không có chức năng nào ở đây hoạt động như tôi cần.

Vì vậy, tôi đã sử dụng mã của Orion và thay đổi nó.

Tôi đã thêm chiều cao tối thiểu, để trên hủy không quá nhỏ.

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

Giống như câu trả lời của @memical.

Tuy nhiên tôi đã tìm thấy một số cải tiến. Bạn có thể sử dụng height()hàm jQuery . Nhưng hãy lưu ý đến các pixel padding-top và padding-bottom. Nếu không, vùng chữ của bạn sẽ phát triển quá nhanh.

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

2

Giải pháp của tôi không sử dụng jQuery (vì đôi khi chúng không phải giống nhau) là bên dưới. Mặc dù nó chỉ được thử nghiệm trong Internet Explorer 7 , vì vậy cộng đồng có thể chỉ ra tất cả các lý do khiến điều này là sai:

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

Cho đến nay, tôi thực sự thích cách nó hoạt động và tôi không quan tâm đến các trình duyệt khác, vì vậy có thể tôi sẽ áp dụng nó cho tất cả các textareas của mình:

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

1

Đây là phần mở rộng cho widget Nguyên mẫu mà Jeremy đã đăng vào ngày 4 tháng 6:

Nó ngăn người dùng nhập thêm ký tự nếu bạn đang sử dụng giới hạn trong textareas. Nó kiểm tra xem còn ký tự không. Nếu người dùng sao chép văn bản vào vùng văn bản, văn bản sẽ bị cắt ở mức tối đa. chiều dài:

/**
 * 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 có một giải pháp tuyệt vời để đặt chiều cao của vùng văn bản khi tải trang bằng jQuery, nhưng đối với ứng dụng của tôi, tôi muốn có thể tăng chiều cao của vùng văn bản khi người dùng thêm nội dung. Tôi đã xây dựng giải pháp của memical như sau:

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

Nó không mượt mà lắm nhưng cũng không phải là một ứng dụng dành cho khách hàng, vì vậy độ mượt mà không thực sự quan trọng. (Nếu điều này là đối mặt với khách hàng, tôi có thể đã sử dụng một plugin jQuery tự động thay đổi kích thước.)


1

Đối với những người đang mã hóa IE và gặp sự cố này. IE có một mẹo nhỏ giúp nó có 100% CSS.

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

Bạn thậm chí có thể cung cấp giá trị cho các row = "n" mà IE sẽ bỏ qua, nhưng các trình duyệt khác sẽ sử dụng. Tôi thực sự ghét mã hóa thực hiện các bản hack IE, nhưng cái này rất hữu ích. Có thể là nó chỉ hoạt động ở chế độ Quirks.


1

Người dùng Internet Explorer, Safari, Chrome và Opera cần nhớ đặt giá trị chiều cao dòng trong CSS một cách rõ ràng. Tôi làm một biểu định kiểu đặt các properites ban đầu cho tất cả các hộp văn bản như sau.

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

1

Đây là một chức năng tôi vừa viết trong jQuery để thực hiện nó - bạn có thể chuyển nó sang Prototype , nhưng chúng không hỗ trợ "liveness" của jQuery nên các phần tử được thêm bởi các yêu cầu Ajax sẽ không phản hồi.

Phiên bản này không chỉ mở rộng mà còn co lại khi nhấn xóa hoặc xóa lùi.

Phiên bản này dựa trên jQuery 1.4.2.

Thưởng thức ;)

http://pastebin.com/SUKeBtnx

Sử dụng:

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

hoặc (bất kỳ công cụ chọn jQuery nào chẳng hạn)

$("textarea").textareacontrol();

Nó đã được thử nghiệm trên Internet Explorer 7 / Internet Explorer 8 , Firefox 3.5 và Chrome. Tất cả hoạt động tốt.


1

Sử dụng ASP.NET, chỉ cần thực hiện điều này:

<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>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.