program story

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

inputbox 2020. 12. 3. 07:49
반응형

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


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

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


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

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

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


한 줄만

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

다음은 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를 사용하지 않는 솔루션을 요청했지만이 질문을 접하는 많은 사람들에게 도움이 될 것입니다.


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

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

참고 URL : https://stackoverflow.com/questions/2803880/is-there-a-way-to-get-a-textarea-to-stretch-to-fit-its-content-without-using-php

반응형