> 웹 프론트엔드 > HTML 튜토리얼 > HTML 태그의 내용을 편집하려면 contenteditable 속성을 설정합니다(텍스트 영역 대체 가능)_HTML/Xhtml_웹 페이지 제작

HTML 태그의 내용을 편집하려면 contenteditable 속성을 설정합니다(텍스트 영역 대체 가능)_HTML/Xhtml_웹 페이지 제작

WBOY
풀어 주다: 2016-05-16 16:37:33
원래의
1782명이 탐색했습니다.


코드 복사
코드는 다음과 같습니다.



BODY에 contenteditable="true"를 추가하면 이 속성이 얼마나 마법 같은지 알 수 있습니다. 따라서 HTML 태그에 contenteditable="true" 속성을 설정하면 태그를 편집할 수 있습니다.

contenteditable 속성은 모든 브라우저와 호환됩니다(IE6 이전 버전의 호환성은 테스트되지 않았습니다)

어떤 경우에는 DIV를 사용하여 입력 또는 텍스트 영역을 대체하여 동일한 효과를 얻을 수 있습니다. 예를 들어 ajax를 사용하면 양식을 제출할 때 DIV의 내용을 얻을 수 있습니다.

주의 깊은 사람들은 QQ 공간에 댓글을 게시하기 위한 텍스트 상자가 실제로는 텍스트 영역 텍스트 상자가 아닌 DIV라는 것을 알게 될 것입니다.

Div CSS가 HTML5 표준 contenteditable 속성을 충족하기 위해 텍스트 영역 텍스트 영역 높이 적응성을 시뮬레이션하는 방법

이 효과는 주로 HTML5의 contenteditable 속성을 태그에 추가하여 얻을 수 있습니다(contenteditable: 사용자가 콘텐츠를 편집할 수 있는지 여부를 지정함). 좋은 점은 IE도 이 속성을 지원하므로 걱정할 필요가 없습니다. 호환성 문제에 대해 많이.
데모:


코드 복사
코드는 다음과 같습니다.