PHP나 자바스크립트를 사용하지 않고 콘텐츠에 맞게 텍스트 영역을 확장할 수 있는 방법이 있습니까?

PHP나 자바스크립트를 사용하지 않고 콘텐츠에 맞게 텍스트 영역을 확장할 수 있는 방법이 있습니까?

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

CSS로 콘텐츠에 맞게 확장할 수 있습니까? (예:overflow:show디브(div)?

한 줄만

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

사실 그렇지 않아요.이것은 보통 자바스크립트를 이용합니다.

여기서 이것을 하는 방법에 대해서는 충분한 논의가 있습니다.

프로토타입을 이용한 텍스트 영역 자동 크기 조정

아니면, 당신은 a를 사용할 수 있습니다.contenteditable요소, 이것은 안에 있는 텍스트에 맞춥니다.

<div contenteditable>Try typing and returning.</div>

일부 자바스크립트를 사용하지 않고는 양식으로 이 값을 보낼 수 없으니 참고하시기 바랍니다.또한.contenteditableHTML 컨텐츠를 생성하고 스타일링을 허용하므로 양식 제출 시 이를 걸러야 할 수도 있습니다.

각도 재료 설계만 사용할 경우 각도에 대한 질문이므로 질문과 100% 관련이 없습니다.

Angular와 연관된 npm 패키지가 있습니다.@angular/cdk(각형 재료 설계를 사용하는 경우).이 패키지에 포함된 속성은 다음과 연결될 수 있습니다.textareacdkTextarea라고 합니다.자동 사이즈.이렇게 하면 자동으로textarea한 줄로 뻗고 늘어뜨립니다.textarea내용에 맞게.만약 당신이 이 도서관을 이용한다면, 이런 것이 효과가 있을 것입니다.

<textarea 
  maxLength="200"
  cdkTextareaAutosize
  type="text">
</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>'));

참고: 작업자는 자바스크립트를 사용하지 않는 해결책을 요구했지만, 이 질문을 접한 많은 사람들에게 도움이 될 것입니다.

이것은 매우 간단한 해결책이지만, 저에게는 효과가 있습니다.

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

답변은 좋았지만 처음 입력할 때 환영받지 못하는 축소를 방지하기 위해 추가해야 하는 코드 조각이 부족했습니다.

var $textareas = $('textarea');
$textareas.each(function() { // to avoid the shrinking
    this.style.minHeight = this.offsetHeight + 'px';
});

$textareas.on('input', function() {
    this.style.height = '';
    this.style.height = this.scrollHeight + 'px';
});

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

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

여기에는 이미 많은 답변이 있지만, 텍스트 영역 크기 조정 코드에 대해서는 여전히 어느 정도 개선이 가능하다고 생각합니다.

이 스크립트 스니펫은 페이지의 모든 텍스트 영역에 걸쳐 있으며, 로드 시와 변경 시 모두 크기가 조정되도록 합니다.

<script>
  document.querySelectorAll("textarea").forEach(element => {
    function autoResize(el) {
      el.style.height = el.scrollHeight + 'px';
    }
    autoResize(element);
    element.addEventListener('input', () => autoResize(element));
  });
</script>

바닐라 JS만 있고 라이브러리는 필요 없습니다.

신뢰할 수 있고 재사용 가능하며 응답성이 뛰어난 보다 완벽한 답변(윈도우 크기에 대한 감시).자바스크립트 모듈에 코드를 넣을 수 있으며, 아래의 설명을 참조하여 작동 방법을 설명합니다.

// File: ui.mjs

/* Auto resize a <textarea>'s height to fit its content.
 * Use the HTML attribute `rows` to set the min height of the element, e.g. rows="2"
 */
function runAutoHeight(el) {
    el.style.height = 'auto';
    const computedStyle = getComputedStyle(el)
    const borderTop = parseFloat(computedStyle.getPropertyValue("border-top-width").replace('px',''));
    const borderBottom = parseFloat(computedStyle.getPropertyValue("border-bottom-width").replace('px',''));
    el.style.height = String(el.scrollHeight + borderTop + borderBottom) + 'px';
}

/* Sets up autoHeight for the given element for the following 2 situations:
 *  1. When the user types in input
 *  2. When the element is resized (e.g. window is resized)
 *
 * It also adds a function to the element called 'autoHeight', which can be manually called.
 * This is useful when setting values to a <textarea> via JS, and hence the `input` event
 * handler will not be run, e.g.:
 *      import * as ui from '/static/path/to/your/ui.mjs';
 *      ui.setupAutoHeight(el)
 *      el.value = "Manually setting value won't fire change event"
 *      el.autoHeight()
 */
export function setupAutoHeight(el) {
    el.autoHeight = () => runAutoHeight(el);
    el.style.resize = "none";
    // Watch for window resizes
    const observer = new ResizeObserver(el.autoHeight);
    observer.observe(el);
    // Watch for changes in text input
    el.addEventListener('input', el.autoHeight)
}

ionic을 사용하는 경우 텍스트 영역에 이 속성을 추가하면 됩니다.

 autoGrow="true" 

다음 답변 보기: 이온 텍스트 영역의 높이를 Ionic 5에서 동적으로 조정

별로 없습니다.<textarea>하지만 항상 다음을 사용할 수 있습니다.

<div contenteditable="true"></div>

어떤 맥락에서는, 어떤 사람들에게 훌륭한 드롭인 대체물로 작용합니다.<textarea>.

---

작업 예:

.textbox {
  width: 400px;
  padding: 12px;
  box-sizing: border-box;
  outline: 1px solid red;
}

<div class="textbox" contenteditable="true">
This div is editable like a textarea. It expands when more words are typed into the available area... keep typing and you'll see how the more you type, the more it grows...
</div>

---

추가 읽기:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

    <script>
        document.querySelectorAll("textarea").forEach(element => {
            function autoResize(el) {
                if (el.scrollHeight > el.offsetHeight) {
                    el.style.height = el.scrollHeight + 'px';
                }
            }
            autoResize(element);
            element.addEventListener('input', () => autoResize(element));
        });
    </script>

데즈만의 환상적인 기능에서 경험한 입력 입력 입력 시 축소에 대한 해결책(위의 데즈만 참조).FTW가 데즈먼의 .offset 바로 위에 올린 게시물에서 참조한 속성과 비교를 추가했습니다.높이.

데스만 함수에서 스크롤 높이가 오프셋보다 작을 때높이(예: 5줄 크기의 텍스트 영역에서 텍스트 1줄)를 조정한 다음 el.style로 조정합니다.키 누름마다 실수로 오프셋 높이의 크기를 줄인 후의 높이.간격띄우기가 스크롤 높이 쪽으로 계속 축소되어 텍스트 영역이 축소되는 것처럼 보입니다.

스타일에 맞게 조정을 시작합니다.텍스트 입력으로 인해 스크롤이 증가하는 경우에만 높이 .offset 높이를 초과하는 높이는 오프셋을 방지합니다.키 입력 시마다 키가 줄어들 때까지의 높이입니다.

감사합니다 데스만과 FTW 위에...

반응을 위한

나는 표시되는 텍스트의 길이를 사용하여 그 숫자를 30으로 나누었습니다(이 숫자가 내 앱에서 제대로 느껴지도록 조정했습니다).

{array.map((text) => (
    <textarea                
     rows={text.length / 30}
     value={text}
    ></textarea>
 )}

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