자동 크기 조정 기능이있는 텍스트 영역 만들기

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 
— 불만을 품은 염소
소스
링크 된 스레드에 허용되는 답변이 저에게 효과적입니다. 줄 바꿈을 추가하면 텍스트 영역이 확장되고 제거하면 텍스트 영역이 축소됩니다. 어떤 브라우저를 사용하고 있습니까?
— 멸종 위기에 처한
3
내 기능에 오류가 있습니다. 줄 끝에 새 줄을 입력해야합니다. 이것이 더 나은 해결책입니다. james.padolsey.com/javascript/jquery-plugin-autoresize
내 플러그인을 사용해보십시오 : github.com/AndrewDryga/jQuery.Textarea.Autoresize
— Andrew Dryga
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
나는 이것에 대한 패키지를 만들어이 사용하는 당신은 반응하는 경우 : npmjs.com/package/react-fluid-textarea
— 마틴 도슨

답변:

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하지만 일반 텍스트 전용 이길 원합니다.

— 판지
소스
13
그렇습니다! 나중에 jsfiddle을 만들었습니다 : jsfiddle.net/CbqFv 이제는 Chrome, Firefox 및 IE8에서 작동하지만 IE8에서는 약간 결함이 있습니다. 줄 수를 늘리거나 줄이면 약간 놀랍니다. jQuery의 자동 크기 조정 플러그인에서 볼 수 있듯이 텍스트 영역을 복제하고 원본 대신 높이를 자동으로 설정 한 다음 원본을 사용하여 스크롤 높이를 설정하여이를 해결합니다. 이 업데이트 된 바이올린에서 jsfiddle.net/CbqFv/2 에서 그렇게했습니다 .IE 문제는 해결되지만 Firefox는 작동하지 않습니다.
— Chris Moschini
3
@HelenNeely : 그런 다음 ID를 사용하지 마십시오. 예를 들어 클래스를 사용하고 해당 클래스의 모든 요소에 대해 init가 수행하는 작업을 수행하십시오. 초보자 작업이어야합니다.
— panzi
3
@ DenilsonSá 만약 현대 브라우저 만 사용한다고 가정 할 수 있다면 웹이 더 좋은 곳이 될 것입니다.
— panzi
2
IE11에 스크롤 막대가 포함되어 있으면 제대로 작동하지 않습니다. 이 바이올린 jsfiddle.net/CbqFv 를 사용 하고 스크롤 막대가 나타날 때까지 줄을 입력하면 볼 수 있습니다. 어떤 아이디어?
— kaljak
6
텍스트 영역이 하단 페이지 끝 부분에 가까워지면 완전히 끊어집니다 style.height='auto'. 해결책은 측정에만 사용되는 숨겨진 형제를 추가하는 것입니다.
— rr-
372

완벽한 아직 간단한 솔루션

2020-05-14 업데이트 (휴대 전화 및 태블릿에 대한 개선 된 브라우저 지원)

다음 코드가 작동합니다 :

  • 키 입력시.
  • 붙여 넣은 텍스트로 (오른쪽 클릭 및 Ctrl + V).
  • 잘린 텍스트 사용 (오른쪽 클릭 및 Ctrl + x).
  • 미리로드 된 텍스트
  • 모든 텍스트 영역 (여러 줄 텍스트 상자)의 사이트 전체
  • 로 파이어 폭스 (v31-67 테스트).
  • 함께 크롬 (v37-74 테스트).
  • 로 IE (V9-V11 시험).
  • 로 엣지 (V14-V18 시험).
  • IOS Safari 와 함께 .
  • 와 안드로이드 브라우저 .
  • 자바 스크립트와 엄격 모드 .
  • 가 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 (Pure 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()

자바 스크립트를 통한 텍스트 업데이트

JavaScript를 통해 텍스트를 텍스트 영역에 삽입 할 때 옵션 1에서 함수를 호출하려면 다음 코드를 추가하십시오.

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

사전 설정 텍스트 높이

텍스트 영역의 초기 높이를 수정하려면 추가 조건을 추가해야합니다.

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>
스 니펫 확장

— 드림 텍
소스
12
이것은 훌륭한 해결책입니다. 메서드 이름과 매개 변수 이름이 개별 문자 대신 실제 이름으로 업데이트 된 경우 약간 더 이해할 수 있습니다.
— Chris Marisic
5
@Obsidian 감사합니다! 방금 왜 항상 0을 얻는 지 알아 냈습니다. — 텍스트 영역을 부트 스트랩 모달에 넣었습니다! 모달이 처음에 숨겨지면 텍스트 영역에 0 scrollHeight 😂😂
— WTIFS
7
@Obsidian Fantastic !! (옵션 3). 는 this.style.height = 'auto';마법 행동 수정 프로그램입니다. scrollHeight가 왜 그렇게 이상해 보이는지 너무 좌절했습니다. 같은 렌더링 사이클에서 scrollHeight를 일치시키는 높이를 자동으로 설정하면 기술적으로 두 번째 높이 만 페인팅해야하지만이 문제를 어떻게 해결하는지 내 마음을 날려 버립니다.
— 비트 덜
2
오늘 Chrome에서 옵션 3을 사용해 보았고 몇 가지를 조정해야했습니다. 1) 텍스트 영역에서 "높이"또는 "모두"전환이있는 경우 항상 올바르게 크기가 조정되지는 않습니다. 높이에 영향을주는 전환을 사용하지 않는 것이 좋습니다. 2) scrollHeight는 높이가 두 줄인 최소값을 반환합니다 (아마 Chrome에서 텍스트 영역의 기본값이기 때문에) .this.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
완전히 확실하지는 않지만 텍스트 영역이 없으면 텍스트 영역이 너무 커집니다. scrollHeight 요소가 계산되는 방식과 관련이 있다고 생각합니다.
— chim
1
다양한 행사를 통해 다양한 시나리오를 활용하십시오 $('textarea.auto-resize').on('change cut paste drop keyup', function(){...})
— raxith
1
뷰포트보다 긴 텍스트에서 Chrome 40 Win 8.1에서 미친 듯이 뛰어납니다. 꽤 사용할 수 없게 만듭니다.
— tobibeer 2013
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는 임의적이며 테스트에 가장 적합한 것이 있는지 테스트하십시오.

style 및 script 태그를 사용하지 않고도 할 수 있지만 약간 난해한 imho가됩니다 (이것은 구식 HTML + JS이며 권장되지 않습니다).

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

편집 : 현대화 된 코드. onkeyup 속성이 addEventListener로 변경되었습니다.
편집 : 키 다운이 키 업보다 낫습니다.
편집 : 편집을 사용하기 전에 함수를 선언
하십시오 : 입력이 키 다운보다 낫습니다 (thnx @ WASD42 & @ MA-Maddin)

jsfiddle

— GijsjanB
소스
3
이것에는 몇 가지 단점이 있습니다. 1) 텍스트 영역의 크기가 조정되지 않고 사용자가 마우스 버튼으로 만 붙여 넣습니다. 2) 사용자가 키보드 (Ctrl + V)를 사용하여 무언가를 붙여 넣으면 Ctrl을 놓을 때만 텍스트 영역의 크기가 조정됩니다. 사용자가 Ctrl + V를 여러 번 누르면 텍스트 영역이 마지막 문자 이후에만 커집니다. 붙여 넣기, 잘라 내기, 변경 및 삭제 이벤트에도 동일한 기능을 추가해야합니다.
— WASD42
따라서 input대신 이벤트를 사용하십시오 . 참조 stackoverflow.com/a/14029861/1951524
— 마틴 슈나이더
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;속성이 설정되어 있는지 확인하십시오. 그렇지 않으면 텍스트 영역이 각 onInput 이벤트에 대해 4px 씩 확장됩니다. 이것이 문제라는 것을 알 때까지 나는 3 시간을 보냈습니다.
— AIon
24

나를위한 가장 좋은 해결책 (작동하고 짧음)은 다음과 같습니다.

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

붙여 넣기 (마우스 포함)로 깜박임없이 잘라내어 들어가고 들어가며 올바른 크기로 줄어드는 매력처럼 작동합니다.

jsFiddle을 살펴보십시오 .

— 바타 발
소스
훌륭한!!! 한 줄 거래! 바보 같은 질문 호 크기를 조정할 때 애니메이션을 추가 할 수 있습니까? 텍스트 상자가 약간 크기를 조정하는 대신 부드럽게 크기를 조정하는 것과 같이?
— user2513846
1
@ user2513846 멀티 라인 편집 디자인으로는 불가능한 것 같습니다. 텍스트 영역 크기에 애니메이션을 적용하는 예는 다음과 같습니다. jsfiddle.net/yk2g333e 텍스트 커서가 줄 또는 캐럿에서 아래로 내려가는 것을 알고 있으므로이 순간에 일시 중지가 없으면 애니메이션 할 내용이 없습니다. 그러나 일시 중지는 사용자에게 성 가실 것입니다.
— vatavale
1
@ user2513846 그러나 텍스트 영역 끝에 빈 줄이 하나 더 있으면 부드러운 애니메이션이 가능합니다. jsfiddle.net/p23erdfr
— vatavale
16

현재 clientHeight 및 내용 scrollHeight의 높은 값을 사용하고 있습니다. 내용을 제거하여 scrollHeight를 더 작게 만들면 이전에 style.height로 설정 한 clientHeight가 열린 상태이므로 계산 된 영역을 더 작게 만들 수 없습니다. 대신 textarea.rows에서 max ()의 scrollHeight와 최소 높이 값을 미리 정의하거나 계산할 수 있습니다.

일반적으로 폼 컨트롤에서 scrollHeight에 의존해서는 안됩니다. scrollHeight는 다른 IE 확장보다 널리 지원되지 않는 것 외에도 HTML / CSS는 양식 컨트롤이 내부적으로 구현되는 방식에 대해 아무 것도 말하지 않으며 scrollHeight가 의미있는 것이라고 보장하지 않습니다. (전통적으로 일부 브라우저는 작업에 OS 위젯을 사용하여 내부에서 CSS와 DOM 상호 작용을 불가능하게했습니다.) 최소한 효과를 활성화하기 전에 scrollHeight / clientHeight가 있는지 확인하십시오.

더 광범위하게 작동하는 것이 중요한 경우 문제를 피하는 또 다른 가능한 방법은 텍스트 영역과 같은 너비로 크기가 지정된 숨겨진 div를 사용하고 동일한 글꼴로 설정하는 것일 수 있습니다. 키업시 텍스트 영역에서 숨겨진 div의 텍스트 노드로 텍스트를 복사합니다 ( '\ n'을 줄 바꿈으로 바꾸고 innerHTML을 사용하는 경우 '<'/ '&'을 올바르게 이스케이프해야 함). 그런 다음 div의 offsetHeight를 측정하면 필요한 높이를 얻을 수 있습니다.

— 보 빈스
소스
1
scrollHeight텍스트 영역에 어떤 브라우저가 문제가 있습니까? IE, 파이어 폭스와 오페라 ... 현재 버전의 벌금을 작동
— 크리스토프
1
내가 처리해야 할 유일한 것은 Konqueror이며, clientHeight를 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>

내 블로그 게시물에서 어떻게 작동하는지 더 자세히 읽을 수 있습니다 .

— 막시밀리안 호프만
소스
1
좋은 해결책이지만 약간의 수정이 필요합니다. 텍스트 영역의 내용이로드 된 경우 f.ex. 데이터베이스에서 텍스트 영역은 작게 유지됩니다. inputforeach주기에서 초기화하는 동안 이벤트 를 트리거해야합니다 .
— Ajax
11

자동 크기

https://github.com/jackmoore/autosize

단독으로 작동하는 독립형은 인기가 있으며 (2018 년 10 월 기준 3.0k + GitHub 스타) 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 그것은 간단하게하고 더 이상 jQuery를에 의존하지 않는 2월 2015 년에 출시되었습니다
— 바삭
죄송합니다. 작동합니다. 어쩌면 나는 다른 브라우저에 있었을 것입니다 .. 그래서, 당신이 내 코멘트를 무시하면 더 좋다고 생각합니다.
— Toni Michel Caubet 2016 년
@ToniMichelCaubet 아, 그렇다면 아마도 CDN 문제 일 것입니다. 내가 체크해 볼게.
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
autosize플러그인은 수동으로 텍스트 영역의 크기 조정 아이콘을 사용하여 크기를 조정할 수 없습니다.
— j4v1
7

여기서 하나의 라이너를 찾았 습니다 .

<textarea name="text" oninput="this.style.height = ''; this.style.height = this.scrollHeight +'px'"></textarea>
— 17K
소스
6

누구든지 콘텐츠를 편집 할 수 있다고 생각 했습니까? 스크롤링을 망칠 필요가 없습니다. 그리고 내가 좋아하는 유일한 JS는 데이터를 흐림에 저장할 계획이라면 ... 그리고 분명히 모든 인기있는 브라우저에서 호환됩니다 : http://caniuse.com/#feat = 콘텐츠 편집 가능

텍스트 상자처럼 보이도록 스타일을 지정하면 크기가 자동으로 조정됩니다. 최소 높이를 원하는 텍스트 높이로 설정하고 그 크기를 지정하십시오.

이 접근 방식의 멋진 점은 일부 브라우저에서 저장하고 태그를 지정할 수 있다는 것입니다.

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은 ENTER에 <div> 요소를 추가합니다.
— sbaechler
contenteditable좋지만 일반 텍스트를 원하면 -webkit-user-modify: read-write-plaintext-onlyand과 같은 많은 옵션이 필요합니다 white-space: pre-wrap.
— mik01aj
@_sbaechler : 사용시 <div>는 생략됩니다 [dom-element].innerText. @WebmasterG IMHO jquery를 생략하고 (투명성을 위해) jsfiddle 대신 실행 가능한 코드 스 니펫을 통해이 페이지에 예제를 포함시키는 것이 좋습니다.
— adabru
4

여러 텍스트 영역에 다음 코드를 사용했습니다. 텍스트 영역에서 삭제, 잘라 내기 및 붙여 넣기 작업을 수행하더라도 Chrome 12, Firefox 5 및 IE 9에서 제대로 작동합니다.

<!-- 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>
— 니 쿤즈 바트
소스
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로 복사하고 preCSS가 동일한 크기를 갖도록합니다.

장점은 프레임 워크가 이벤트를 건드리지 않고 텍스트를 이동할 수있는 간단한 도구를 제공한다는 것입니다. 즉, AngularJS ng-model="foo" ng-trim="false"에서는 textarea및 ng-bind="foo + '\n'"에 추가 할 것 pre입니다. 바이올린을 참조하십시오 .

pre글꼴 크기가와 동일한 지 확인하십시오 textarea.

— 카롤리스 주 델레
소스
1
" 그냥 그 확인 pre과 같은 글꼴 크기를 갖고textarea "- 그들은 같은 필요 line-height하고, 동일한 양 padding및 / 또는 border도. 이것이 Angular에 가장 적합한 솔루션입니다.
— 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변경되는 너비 또는 텍스트 영역의 너비를 변경하는 다른 이벤트 인 경우 창 크기 조정 이벤트
  2. 때 textarea의display 스타일 속성 변경, 예를 그것에서 진행 none(숨겨진)에block
  3. 때의 가치 textarea 프로그래밍 방식으로 변경되는 경우

사용 window.getComputedStyle또는 가져 오기currentStyle 다소 계산 비용이 많이들 수 있으므로 대신 결과를 캐시 할 수 있습니다.

IE6에서 작동하므로 충분히 지원되기를 바랍니다.

— 조셉 닐드
소스
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경우 숨겨진 필드에 값을 지정 하면 양식과 함께 자동으로 제출됩니다.

— 라실 힐란
소스
이 페이지에서 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-pro
소스
선이 넘치지 않는 한 작동합니다-맞지 않습니다.
— Tomáš Kafka
상자 밖으로 작동, 위대한 (firefox 72)
— Mikeys4u
2

jquery로 이것을 구현하는 짧고 정확한 방법을 알고 있습니다. 추가 숨겨진 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 .live()는 더 이상 사용되지 않습니다. api.jquery.com/live 일반적으로 .on()대신 사용하고 싶을 것입니다.
— Luke
2

누군가이 방법을 언급하는지 모르겠지만 경우에 따라 행의 높이를 조정할 수 있습니다.

textarea.setAttribute('rows',breaks);

데모

— 으
소스
1
당신이 가지고있는 경우에만 작동합니다 white-space: nowrap;. 줄 바꿈없이 다른 줄로 줄 바꿈하면 텍스트 영역이 더 이상 제대로 조정되지 않습니다.
— Yeti
2

다음은 panzi의 답변에 대한 angularjs 지시문입니다.

 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
소스
setTimout보다 $ timeout을 사용해야합니다. 이렇게하면 모델이 초기화됩니다 (밀리 초를 지정할 필요가 없습니다-각도 다이제스트주기 후에 실행 됨). 또한 element = element [0]; 어쨌든, 더 많은 텍스트가 나올 때까지 텍스트 영역이 한 줄이어야하기 때문에 해결책은 나에게 좋지 않습니다.
— 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;});
— 토니 미셸 Caubet
2

새로운 버전의 Angular에서 동일한 목표를 달성하려는 사람들.

textArea 요소 참조를 가져옵니다.

@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';
    }
  }
— 디 yan 슈 라왓
소스
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에서 테스트되었습니다. 어떤 이유로 든 이것이 효과가없는 경우 알려주십시오. 그러나 이것이 내가 찾은 가장 깨끗하고 간단한 방법입니다. 그리고 그것은 잘 작동합니다! :디

— 소생
소스
편집 후 텍스트를 제거하려고 했습니까? 텍스트 영역이 축소 되었습니까?
— 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이 있습니다

— 쿠레나이 쿠나이
소스
1

http://javierjulio.github.io/textarea-autosize 의 자바 스크립트 라이브러리를 권장합니다 .

의견에 따라 플러그인 사용에 대한 예제 코드 블록을 추가하십시오.

<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)
}
— 주황색 01
소스
1

qQuery를 사용하는 MakeTextAreaResisable

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();
}
— 이고르 크루 피츠 키
소스
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();
— 김호만
소스
"키업"이벤트를 듣기에 충분하지만 이것은 대답으로 받아 들여 져야합니다.
— Bob Ross
1

내 구현은 매우 간단합니다. 입력의 줄 수를 세고 텍스트 행임을 나타내는 최소 2 행을 계산하십시오.

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

자극이 포함 된 전체 작업 예 : https://jsbin.com/kajosolini/1/edit?html,js,output

(그리고 이것은 브라우저의 수동 크기 조정 핸들과 함께 작동합니다)

— localhostdotdev
소스
2
"enter"를 눌러 줄을 끊는 경우에만 작동합니다. 텍스트가 텍스트 영역의 너비보다 길지만 "enter"를 누르지 않으면 텍스트가 확장되지 않습니다.
— Nathalia Xavier
1

수락 된 답변이 정상적으로 작동합니다. 그러나 이것은이 간단한 기능을위한 많은 코드입니다. 아래 코드는 트릭을 수행합니다.

   $(document).on("keypress", "textarea", function (e) {
    var height = $(this).css("height");
    var iScrollHeight = $(this).prop("scrollHeight");
    $(this).css('height',iScrollHeight);
    });
— 카르 티크
소스
0

TextArea에 MVC HTML 도우미를 사용하는 동안 수행 한 작업은 다음과 같습니다. 텍스트 영역 요소가 상당히 많았으므로 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에서 테스트했습니다.

— 거너 즈
소스
0

이 코드를 사용할 수 있습니다 :

커피 스크립트 :

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.