HTML5에서 contentEditable을 사용하여 여러 줄의 text_html5 튜토리얼 팁 높이를 자동으로 늘립니다.

contentEditable은 Microsoft에서 개발한 전역 속성으로, 디컴파일되어 다른 브라우저에서 사용할 수 있습니다. 이 속성의 주요 기능은 사용자가 요소의 내용을 편집할 수 있도록 하는 것이므로 요소는 마우스 포커스를 얻을 수 있는 요소여야 하며, 마우스를 클릭한 후 사용자에게 다음을 알리는 캐럿을 제공해야 합니다. 요소의 콘텐츠를 편집할 수 있습니다. contentEditable 속성은 true 또는 false로 지정할 수 있는 부울 속성입니다.

또한 이 속성에는 숨겨진 상속 상태가 있습니다. 속성이 true이면 해당 요소는 편집을 허용하도록 지정되고, false이면 해당 요소는 편집을 허용하지 않는 것으로 지정됩니다. false인 경우 상속 상태에 따라 결정됩니다. 요소의 상위 요소가 편집 가능하면 해당 요소도 편집 가능합니다.

또한 요소에는 contentEditable 속성 외에도 isContentEditable 속성이 있습니다. 요소를 편집할 수 있으면 이 속성은 true이고, 요소를 편집할 수 없으면 이 속성은 false입니다.
다음은 contentEditable 속성을 사용하는 예입니다. contentEditable 속성이 목록 요소에 추가되면 독자는 브라우저에서 이 예를 시험해 볼 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. > 
2. <머리> 
3. <메타 문자 집합="UTF- 8"> 
4. <제목>conentEditalbe 속성 예 제목> 
5. 머리> 
6. <h2>수정 가능한 목록 h2> 
7. <ul contentEditable="true" > 
8. <li>목록 요소 1 리> 
9. <li>목록 요소 2 리> 
10. <li>목록 요소 3 리> 
11. ul> 

이 코드를 실행한 결과는 아래와 같습니다.

줄 텍스트 높이가 자동으로 증가합니다

여러줄 텍스트 상자의 경우 누구나 즉시 텍스트 영역을 사용하는 것을 생각할 것입니다. 텍스트 영역을 사용하는 것은 정말 편리하지만 한 가지 단점이 있습니다. 높이를 자동으로 늘릴 수는 없습니다. 해당 열과 행을 사용하거나 CSS를 직접 사용하여 너비를 늘립니다.

Weibo에 게시하는 것과 유사한 입력 상자와 같이 특정 시간에는 자동 높이 조절이 여전히 필요합니다. 이는 일반적인 요구 사항입니다. 텍스트 상자에는 기본 높이가 있고 입력 텍스트가 이 높이를 초과하면 자동으로 증가합니다. . 최대 제한이 있어야 합니다. 이 제한을 초과하면 세로 스크롤 막대가 나타납니다.

이 요구 사항을 충족하기 위해 텍스트 영역을 사용하는 경우 텍스트 상자의 높이를 동적으로 변경하기 위해 js와 협력해야 하며 이는 특히 모바일 측에서는 비과학적인 일입니다. 이때 contenteditable 속성을 사용할 수 있습니다.

예:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div contenteditable="true" 클래스="상자" ID="상자" >
2.                                                  
3. div>
4. <스타일>
.box{width:200px;max-height:100px;border:1px solid #ccc;overflow-y:auto;overflow-x:hidden;}
6. 스타일>

contenteditable 속성의 값이 true로 지정되어 있으면 div는 편집 가능하게 되며 콘텐츠가 증가함에 따라 높이도 자동으로 증가합니다. 그런 다음 위의 요구 사항을 달성하기 위해 div에 최대 높이를 지정합니다.