PHP 또는 JavaScript를 사용하지 않고 내용에 맞게 텍스트 영역을 확장하는 방법이 있습니까?

95

사용자가 편집 할 내용으로 텍스트 영역을 채우고 있습니다.

overflow:showdiv 와 같은 CSS로 콘텐츠에 맞게 늘릴 수 있습니까?

html css

— 의미
소스

1

프레임 워크를 사용하지 않는 버그가없는 대답이 없습니까? :-(

— starbeamrainbowlabs nov.

css max-width : 100 %를 사용하면 자동으로 상자에 맞습니다. 그것에 문제가 있습니까?

— yashas123

42

별로. 이것은 일반적으로 자바 스크립트를 사용하여 수행됩니다.

여기에이를 수행하는 방법에 대한 좋은 토론이 있습니다 ...

프로토 타입을 사용하여 텍스트 영역 자동 크기 조정

— Rik Heywood
소스

210

한 줄만

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

— 마틴 프레스톤
소스

8

이게 어떻게 두 개의 표만 가지고 있습니까? 이것은 놀라운 Martin입니다. 이 문제를 해결하는 데 30 분만 소요됩니다. 훌륭한 일.

— Philip Duffney

30

이것은 훌륭합니다. 스크롤바를 표시하지 않을만큼 텍스트 영역을 크게 만들기 this.scrollHeight + "px"위해 변경 사항을 추가하고 싶습니다 this.scrollHeight + 3 + "px".

— maarten

문제 : 사용자가 아래로 스크롤 할 수있을만큼 글을 쓰면 Enter 키를 눌러 새 줄을 추가 할 때마다 스크롤 위치가 재설정됩니다.

— Costa

5

이것이 오래된 질문이라는 것을 알고 있지만 편집 페이지에 텍스트 영역이 있고 페이지가로드 될 때 이미 값이 있습니다. 그러면 콘텐츠에 맞게 확장하려면 어떻게해야합니까?

— Arootin Aghazaryan

1

@ArootinAghazaryan-이미 해결책을 찾았을 수도 있지만 다른 사람을 위해 : HTML에서 인라인으로 만드는 대신 크기 조정 코드로 함수를 만듭니다. 그런 다음 페이지로드시 동일한 함수를 호출 할 수 있습니다.

— Magnus Eriksson

6

다음은 jQuery와 함께 작동하는 함수입니다 (너비가 아닌 높이에만 해당).

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

참고 : op는 Javascript를 사용하지 않는 솔루션을 요청했지만이 질문을 접하는 많은 사람들에게 도움이 될 것입니다.

— 크리스 더트로
소스

5

이것은 매우 간단한 솔루션이지만 저에게 효과적입니다.

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>

스 니펫 확장

— NicB
소스

2

상자의 높이는 줄 바꿈뿐만 아니라 키를 누를 때마다 증가 합니다. 백 스페이스 및 삭제로 인해 높이가 증가합니다. 수정하면 찬성표를 다시받을 수 있습니다.

— Birrel

IE와 같은 일부 브라우저는 스크롤 높이를 정확하게 계산하지 않아 이러한 종류의 문제가 발생할 수 있습니다. Chrome에서도 저에게 그런 일이 일어나고 있다는 사실은 신경 쓰지 마세요 ...

— KthProg

1

여기에 해결책이 있습니다 (편집 대기열이 꽉 찼습니다) :

<style>   textarea {     resize: none;     overflow: auto;   } </style>  <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea>  <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){     this.style.height = '1px';     this.style.height = this.scrollHeight + 'px'; } </script>

기본적으로 먼저 높이를 1px로 설정해야합니다.이 때문에 stackoverflow.com/questions/10722058/…

— KthProg

3

동적 텍스트 영역 제어를위한 또 다른 간단한 솔루션입니다.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>

스 니펫 확장

— 크루 티카 파텔
소스