프로토 타입을 사용하여 텍스트 영역을 자동 크기 조정하는 방법은 무엇입니까?

121

저는 현재 제가 일하는 회사의 내부 판매 신청서를 작성 중이며 사용자가 배송 주소를 변경할 수있는 양식을 가지고 있습니다.

이제 기본 주소 세부 정보에 사용하는 텍스트 영역이 텍스트 영역을 차지하고 텍스트가 변경되면 자동으로 크기가 조정되면 훨씬 더 멋지게 보일 것이라고 생각합니다.

여기에 현재 스크린 샷이 있습니다.

ISO 주소

어떤 아이디어?

크리스

좋은 점이지만 크기를 조정해야하는 이유가 있습니다. 나는 그것이 포함 된 정보의 영역이되기 위해 차지하는 영역을 원한다. 스크린 샷에서 볼 수 있듯이 고정 된 텍스트 영역이 있으면 수직 공간을 상당히 차지합니다.

글꼴을 줄일 수 있지만 크고 읽기 쉬운 주소가 필요합니다. 이제 텍스트 영역의 크기를 줄일 수 있지만 3 또는 4 (하나는 5) 행을 사용하는 주소 행을 가진 사람들에게 문제가 있습니다. 사용자가 스크롤바를 사용하도록하는 것은 절대 안됩니다.

좀 더 구체적이어야한다고 생각합니다. 나는 수직 크기 조정 후이며 너비는 그다지 중요하지 않습니다. 이 경우 발생하는 유일한 문제는 창 너비가 너무 작을 때 (스크린 샷에서 볼 수 있듯이) ISO 번호 (큰 "1")가 주소 아래로 밀린다는 것입니다.

기믹을 갖는 것이 아닙니다. 불필요한 공간을 차지하지 않고 그 안의 모든 텍스트를 표시하는 사용자가 편집 할 수있는 텍스트 필드를 갖는 것입니다.

누군가가 문제에 접근하는 다른 방법을 생각 해낸다면 저도 그것에 대해 열려 있습니다.

좀 이상하게 행동했기 때문에 코드를 약간 수정했습니다. 방금 입력 한 문자를 고려하지 않았기 때문에 키업시 활성화되도록 변경했습니다.

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 샤에게

JQuery 버전이 있습니까? JQuery에서 TextArea의 열과 행에 액세스하는 방법은 무엇입니까?

— Zach

거의 동일하지만 텍스트가 제거되면 더 작아야하는 명시적인 요구 사항이 있습니다. stackoverflow.com/questions/454202/…

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

75

페이스 북은 사람들의 벽에 글을 쓸 때 그렇게하지만 세로로만 크기가 조정됩니다.

가로 크기 조정은 단어 줄 바꿈, 긴 줄 등으로 인해 엉망인 것처럼 보이지만 세로 크기 조정은 매우 안전하고 좋은 것 같습니다.

내가 아는 Facebook을 사용하는 초보자 중 누구도 그것에 대해 언급하거나 혼란스러워 한 적이 없습니다. 나는 이것을 '계속해서 실행하라'고 말하는 일화적인 증거로 사용할 것입니다.

Prototype을 사용하여이를 수행하는 일부 JavaScript 코드 (내가 잘 알고 있기 때문에) :

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

추신 : 분명히이 자바 스크립트 코드는 매우 순진하고 잘 테스트되지 않았으며 소설이 들어있는 텍스트 상자에서 사용하고 싶지는 않지만 일반적인 아이디어를 얻었습니다.

— 오리온 에드워즈
소스

2

이것은 브라우저가 잘못된 문자에서 중단된다고 가정합니다. 에서 시도해보십시오 <textarea cols='5'>0 12345 12345 0</textarea>. (저는 거의 동일한 구현을 작성했고 한 달이 지나야 발견했습니다.) 빈 줄에서도 실패합니다.

— st-boost

이것에 대한 JQuery 버전이 있습니까?

— emeraldhieu 2015 년

$ A (str.split ( "\ n"))의 백 슬래시는 또 하나가 필요합니다. (위 답변에 대한 나의 편집은 어떤 이유로 살아남지 못했습니다.)

— gherson

67

이러한 답변 중 일부에 대한 한 가지 개선은 CSS가 더 많은 작업을 수행하도록하는 것입니다.

기본 경로는 다음과 같습니다.

보관할 컨테이너 요소를 만듭니다. textarea및 숨겨진div
Javascript를 사용하여 textarea의 콘텐츠를div 들'
브라우저가 해당 div의 높이를 계산하도록합니다.
브라우저는 hidden을 렌더링 / 크기 조정하기 때문에 의 높이를 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 2011 년

4

이 솔루션을 마크 업이나 스타일링이 필요없는 독립형의 사용이 간편한 jQuery 플러그인으로 자유롭게 구현했습니다. xion.io/jQuery.xarea 경우 누군가 년대는 :)을 사용할 수 있습니다

— XION

2

숨겨진 DIV 여전히 숨겨져에 textCopy을 허용 설정하면 ... textCopy 내용이 커질 정도로, 당신은 결국 페이지의 전체 길이를 따라 스크롤을 얻을 것이다 마크 업에 공간을 차지합니다

— topwik

1

이것에 대한 또 다른 멋진 조정; var text = $("#textArea").val().replace(/\n/g, '<br/>') + ' ';숨겨진 div가 nbsp로 래핑되기 때문에 텍스트 영역 끝의 빈 새 줄에서 비어 있지 않은 줄로 이동할 때 불규칙한 동작이 발생하지 않도록합니다.

— 무의식 중에

1

@ '& nbsp;'추가에 대한 좋은 전화 새 줄에 첫 글자를 추가 할 때 갑작스런 크기 증가를 없애기 위해 – 나에게는 이것이없이 끊어졌습니다 – 이것은 답에 추가되어야합니다!

— davnicwil

40

다음은 텍스트 영역을 자동으로 조정하는 또 다른 기술입니다.

줄 높이 대신 픽셀 높이를 사용합니다. 비례 글꼴을 사용하는 경우 줄 바꿈을보다 정확하게 처리합니다.
ID 또는 요소를 입력으로 허용
선택적 최대 높이 매개 변수를 허용합니다. 텍스트 영역이 특정 크기 이상으로 커지지 않도록하려면 유용합니다 (모든 항목을 화면에 유지하고 레이아웃이 깨지지 않도록 함).
Firefox 3 및 Internet Explorer 6 에서 테스트 됨

코드 : (일반 바닐라 자바 스크립트)

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

데모 : (jQuery 사용, 지금 입력하고있는 텍스트 영역의 대상 -Firebug가 설치되어 있는 경우 두 샘플을 콘솔에 붙여넣고이 페이지에서 테스트)

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

— Shog9
소스

@SMB-구현하기 너무 어렵지 않을 것입니다. 다른 조건을 추가하면됩니다

— 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";텍스트 영역의 스타일을 지정하는 방법 (라인 높이, 패딩 및 그런 종류의 항목)에 따라 플레이해야 할 수도 있습니다 .

— 에두아르드 루카
소스

스크롤바가 깜박이는 것이 마음에 들지 않는다면 가장 좋은 해결책입니다.

— cfillol

keyup 이벤트 만 잡는 것으로 충분합니다. 그렇게 생각하지 않습니까?

— cfillol

2

스크롤바가 깜박이지 않도록 textarea 오버플로 속성을 "숨김"으로 설정합니다.

— cfillol

keyup충분할 수 있지만 확실하지 않습니다. 나는 그것을 알아 내서 너무 기뻤고 다른 것을 시도하지 않았습니다.

— Eduard Luca

왜 this.style.height = "1px"를 추가했는지 알아 보려고 노력 중입니다. 또는 this.style.height = "auto"; 전에. 이 줄을 추가하지 않으면 콘텐츠를 제거해도 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);
  });   
});

— 제레미 카우프만
소스

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

— Gyan
소스

죽은 링크. 코드는 여기에 있습니다. 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의 대답처럼.

그러나 몇 가지 개선 사항을 발견했습니다. jQuery height()함수를 사용할 수 있습니다 . 그러나 padding-top 및 padding-bottom 픽셀에 유의하십시오. 그렇지 않으면 텍스트 영역이 너무 빨리 커집니다.

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

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

다음은 Jeremy가 6 월 4 일에 게시 한 Prototype 위젯의 확장입니다.

텍스트 영역에서 제한을 사용하는 경우 사용자가 더 많은 문자를 입력하지 못하도록합니다. 남은 문자가 있는지 확인합니다. 사용자가 텍스트를 텍스트 영역에 복사하면 텍스트가 최대로 잘립니다. 길이:

/**
 * 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 은 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에는 100 % CSS로 만드는 약간의 트릭이 있습니다.

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

IE가 무시하지만 다른 브라우저에서 사용할 rows = "n"에 대한 값을 제공 할 수도 있습니다. IE 해킹을 구현하는 코딩은 정말 싫지만 이것은 매우 도움이됩니다. Quirks 모드에서만 작동 할 수 있습니다.

— 아인슈타인 47
소스

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>

— 팻 머레이
소스