내용 길이에 따라 크기를 조정할 텍스트 영역

내용 길이에 따라 크기를 조정할 텍스트 영역

이 질문에는 이미 다음과 같은 답변이 있습니다.

자동 크기 조정을 사용하여 텍스트 영역 (47개 답변)

닫힘9년 전에.

상자에 텍스트를 입력하는 텍스트 영역이 필요합니다. 스크롤 바를 처리할 필요가 없도록 필요에 따라 길이가 늘어나고 텍스트를 삭제한 후 축소해야 합니다!저는 가벼운 폼을 가지고 있기 때문에 무툴즈나 jquery 루트를 가기 싫었습니다.

다음으로 설정하여 내용 높이를 확인할 수 있습니다.1px그 다음에 그 책을 읽습니다.scrollHeight속성:

function textAreaAdjust(element) {
  element.style.height = "1px";
  element.style.height = (25+element.scrollHeight)+"px";
}

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

파이어폭스 3, IE 7, 사파리, 오페라, 크롬에서 작동합니다.

시도해 볼 수도.contenteditable정상으로 돌리다p아니면div. 그렇지 않습니다.textarea스크립트 없이 자동으로 resize됩니다.

.divtext {
    border: ridge 2px;
    padding: 5px;
    width: 20em;
    min-height: 5em;
    overflow: auto;
}

<div class="divtext" contentEditable>Hello World</div>

다음 기능을 사용합니다.

function adjustHeight(el){
    el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" : "60px";
}

다음 html 사용:

<textarea onkeyup="adjustHeight(this)"></textarea>

그리고 마지막으로 이 CSS를 사용합니다.

textarea {
min-height: 60px;
overflow-y: auto;
word-wrap:break-word
}

이 방법은 스크롤 바를 표시하여 높이를 조정할 필요가 있음을 감지하고, 스크롤 바가 텍스트 영역에 나타날 때마다 스크롤 바를 다시 숨기는 것과 마찬가지로 높이를 조정하는 것입니다.

jquery 솔루션이 구현되었으며 소스 코드는 github(https://github.com/jackmoore/autosize )에서 사용할 수 있습니다.

Alciende의 대답은 방금 사파리에서 어떤 이유로든 제게 적합하지는 않았지만, 약간의 수정을 거친 후에 그렇게 되었습니다.

function textAreaAdjust(o) {
    o.style.height = "1px";
    setTimeout(function() {
        o.style.height = (o.scrollHeight)+"px";
    }, 1);
}

이것이 누군가에게 도움이 되길 바랍니다.

너비를 결정하고 한 줄에 몇 자를 넣을 수 있는지 확인한 다음 키를 누를 때마다 다음과 같은 모양의 함수를 호출합니다.

function changeHeight()
{
var chars_per_row = 100;
var pixles_per_row = 16;
this.style.height = Math.round((this.value.length / chars_per_row) * pixles_per_row) + 'px';
}

코드를 테스트하지 않았습니다.

특히 자바스크립트에서는 텍스트의 너비를 가변적인 글꼴로 얻을 수 있는 방법이 없다고 생각합니다.

내가 생각할 수 있는 유일한 방법은 css에 의해 폭이 가변적으로 설정된 숨겨진 요소를 만들고 그 안에 텍스트를 넣는 것입니다.HTML, 해당 요소의 너비를 가져옵니다.따라서 텍스트 영역 자동 크기 조정 문제에 이 방법을 적용할 수 있습니다.

스판과 텍스트 영역을 사용하여 이를 달성할 수 있습니다.

텍스트가 변경될 때마다 텍스트 영역의 텍스트로 스팬을 업데이트해야 합니다.그런 다음 텍스트 영역의 CSS 너비와 높이를 span의 clientWidth와 client로 설정합니다.높이 속성.

예:

.textArea {
    border: #a9a9a9 1px solid;
    overflow: hidden;
    width:  expression( document.getElementById("spnHidden").clientWidth );
    height: expression( document.getElementById("spnHidden").clientHeight );
}

언급URL : https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length