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

코드 복사

코드는 다음과 같습니다.

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

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

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

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

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

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

코드 복사

코드는 다음과 같습니다.

　

　

첨부파일

FF 브라우저에서 컨테이너가 포커스를 받으면 커서의 높이가 컨테이너의 높이와 동일해지거나 이때 자리 표시자가 있으면 커서가 표시되지 않습니다.
또는 와 같이 기본적으로 컨테이너에 추가하면 이 문제를 해결할 수 있습니다.

이제 Yuzi는 js를 추가하지 않고도 편집 가능하고 자동으로 조정할 수 있는 또 다른 좋은 방법을 소개합니다. 암호. 모두가 눈을 뜨게 하세요. Yuzi는 TextArea 텍스트 상자와 마찬가지로 DIV를 텍스트 상자로 직접 사용할 수 있습니다. 더 중요한 것은 DIV의 사용자 경험이 더 완벽하고 멋지다는 것입니다.

Html의 contentEditable 속성은 특정 요소의 편집 가능 상태를 켤 수 있습니다. 아마도 당신은 contentEditable 속성을 사용해 본 적이 없거나 들어본 적도 없을 것입니다. contentEditable의 역할은 매우 마술적입니다. div 또는 전체 웹 페이지는 물론 범위 및 기타 요소를 쓰기 가능하게 만들 수 있습니다. 가장 일반적으로 사용되는 입력 텍스트 콘텐츠는 input 및 textarea입니다. contentEditable 속성을 사용한 후 div, table, p,span,body 및 기타 여러 요소에 콘텐츠를 입력할 수 있습니다. 특히, contentEditable은 html5 표준에서 효과적으로 지원되었습니다. 와서 그것을 목격하십시오.

contentEditable="true" 속성을 설정하고 나면 정말 마술적이지 않나요? ㅎㅎ...

데모 페이지:
http://demo.jb51.net/js/2014/ContentEditable/

특수 효과를 적용해 보겠습니다. div 요소 편집을 켜서 사진을 삽입할 수 있는지 여부를 확인하려면 js를 사용해야 합니다.

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

<script><br />function img (){<br />var location1 = 프롬프트("이미지의 주소를 입력하세요:","http://");<br />if(location1){<br />selImg(location1);<br />}<br />}<br />function selImg(s){<br />if(!s){return false;}<br />var h=s.substr(s.lastIndexOf(".") 1,3 );<br /> if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){<br />Edit=document.getElementById("idEdit ")<br /> Edit.innerHTML ='<img src=' s ' alt="HTML 태그의 내용을 편집하려면 contenteditable 속성을 설정합니다(텍스트 영역 대체 가능)_HTML/Xhtml_웹 페이지 제작" >'<br />}<br />else{<br />}<br />}<br /></script>
< ;div NAME=EditCtrl id=idEdit contentEditable=true style="max-width:90%"> Yuzi.me

좋습니다. 더 많은 효과를 사용하려면 js 코드를 직접 작성해야 합니다. 모든 공성전 영웅들이 최선을 다해 활약하길 바라며 공유를 기대합니다!