JavaScript DOM 학습 2장 텍스트 편집_기본 지식

예시
이 페이지는 예시입니다. 단락을 클릭하고 편집한 다음 준비를 클릭하세요. 변경사항이 표시됩니다.

문제
첫 번째 문제는 텍스트 상자를 편집 영역으로 사용하고 싶다는 것입니다. 처음에는 텍스트 상자에 내용을 넣을 수 없었습니다. 독자들은 텍스트 상자의 값이 문서에 배치될 때까지 설정할 수 없다는 Mozilla의 경고를 발견했습니다.
게다가 Mozilla의 콘텐츠 패키징도 별로 좋지 않습니다. 여러 가지 랩 매개변수를 시도했지만 결과가 그리 좋지 않았습니다.
가장 심각한 문제는 수정된 콘텐츠를 서버로 다시 보내는 것인데, 이는 거의 모든 CMS 시스템이 수행하는 작업입니다. 독자들은 나에게 많은 영리한 조언을 주었습니다. 하지만 자바스크립트로는 할 수 없기 때문에 해결책을 제시할 수는 없습니다. 그러니 방법을 찾았다는 이메일을 나에게 보내지 마세요. 그게 효과가 있을 수도 있지만, 저는 단지 서버측 코드가 필요하지 않은 순수한 JavaScript 방식을 원할 뿐입니다.

스크립트

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

var 편집 = false;

if (document.getElementById && document.createElement) {
var butt = document.createElement('BUTTON')
var buttext = document.createTextNode('Ready!') ;
butt.appendChild(buttext);
butt.onclick =
}

function catchIt(e) {
if (편집) return; !document.getElementById || !document.createElement) return;
if (!e) var obj = window.event.srcElement;
else var obj = e.target; = 1) {
obj = obj.parentNode;
}
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return; nodeName != 'P' && obj.nodeName != 'HTML') {
    obj = obj.parentNode;
  }
 if (obj.nodeName == 'HTML') return
  var; x = obj .innerHTML;
var y = document.createElement('TEXTAREA');
var z = obj.parentNode
z.insertBefore( butt,obj );
z.removeChild(obj);
y.focus()
편집 = true; function saveEdit( ) {
var Area = document.getElementsByTagName('TEXTAREA')[0];
var y = document.createElement('P')
var z = Area.parentNode; > y.innerHTML = Area.value;
z.removeChild(area);
z.removeChild(document.getElementsByTagName('button')[0]) ;
편집 = false;
}

document.onclick = catchIt;


설명
false로 설정했습니다. 사용자가 단락을 편집하고 있는지 여부를 표시하는 데 사용됩니다. 물론 처음에는 아무것도 없습니다.

var edit=false;

버튼 생성
그런 다음 나중에 여러 번 필요할 Radey 버튼을 생성합니다. 이를 위해서는 고급 스크립팅 기술이 필요하므로 먼저 개체 감지를 먼저 수행하십시오.

코드 복사


코드는 다음과 같습니다.

if (document.getElementById && document.createElement) {

최신 브라우저인 경우 버튼을 만듭니다.

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

var butt = document.createElement('BUTTON');

텍스트는

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

var buttext = document.createTextNode('Ready!');

이 텍스트를 입력하세요. 버튼에 추가하세요:

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

butt.appendChild(buttext)

그런 다음 onclick 이벤트 핸들러를 추가하세요.

코드를 복사하세요. 코드는 다음과 같습니다.

butt .onclick = saveEdit; 2 }

이제 버튼이 버튼에 저장되어 필요할 때 직접 참조할 수 있습니다.

P를 텍스트 상자로 변환
나중에 전체 페이지에 대한 onclick 이벤트를 정의하겠습니다. 이러한 모든 이벤트는 catchIt() 함수로 전송됩니다.

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

function catchIt(e){

먼저 사용자가 문단을 정상적으로 편집했는지 확인하세요. 그렇다면 기능을 종료하세요.

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

if (editing) return

그런 다음 지원 확인:

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

if (!document.getElementById || !document.createElement) return

Then; 이벤트 소스 찾기:

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

if (!e) var obj = window.event.srcElement; 2 else var obj = e.target;

이제 이벤트 소스가 있지만 문제는 Mozilla가 텍스트 노드를 소스(필요한 P 노드 대신). 따라서 노드가 레이블이 아닌 경우(nodeType이 1이 아님) DOM 트리를 위쪽으로 탐색해야 합니다.

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

while (obj.nodeType != 1) { 2 obj = obj.parentNode 3 }

이제 레이블로 끝납니다. 이것이 텍스트 상자의 레이블인 경우 사용자는 이를 클릭한 후 편집할 수 있습니다. 링크 라벨인 경우 사용자가 클릭한 후에도 링크로 반영되어야 합니다. 이 두 가지 경우에는 이 기능이 필요하지 않습니다.

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

if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;

P 태그 또는 HTML 태그를 찾을 때까지 DOM 트리를 다시 위쪽으로 탐색해야 합니다.

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

while (obj.nodeName != 'P ' && obj.nodeName ! = 'HTML') { 2 obj = obj.parentNode 3 }

HTML 태그인 경우 사용자가 단락 외부를 클릭했다는 의미이며 함수는 다음과 같습니다.

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

if (obj.nodeName == 'HTML' ) return

이를 감지한 후 마지막으로 편집하려는 단락을 사용자가 클릭하는지 확인합니다. 그런 다음 단락의 innerHTML을 저장합니다.

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

var x = obj.innerHTML ;

새 TEXTAREA를 만들고 저장합니다.

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

var y = document.createElement('TEXTAREA')

그런 다음 단락의 상위 노드를 찾습니다.

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

var z = obj.parentNode

이제 다음과 같습니다.

            z
            |
  ---------------------------------------
  |    |      |      |   |
 [more] y(TEXTAREA) butt(BUTTON) P  [more]

그런 다음 단락을 삭제하세요. 이제 텍스트 상자와 버튼이 이전 단락을 대체한 것처럼 보입니다.

지금까지는 텍스트 상자를 삽입한 후 텍스트 상자 안에 단락의 innerHTML을 배치할 수 있었습니다. Mozilla는 삽입하기 전에 텍스트 상자에 내용을 추가하는 것을 지원하지 않습니다.

	y.value = x;

사용자 편의를 위해 텍스트 상자에 포커스를 둡니다.

	y.focus();

그런 다음 편집을 true로 설정하세요.

	editing = true;
}

텍스트 상자를 P로 변환
사용자가 준비 버튼을 클릭하면 그 반대가 되어야 합니다. 이는 saveEdit() 함수에 의해 수행됩니다.
function saveEdit() {Get TEXTAREA(여기서는 전체 페이지에 TEXTAREA가 하나만 있다고 가정):
var Area = document.getElementsByTagName('TEXTAREA')[0] 새 단락을 만들고 저장합니다.

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

var y = document.createElement('P')

텍스트 찾기 상자의 상위 요소: 여기에 새 단락을 추가해야 합니다.

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

var z = Area.parentNode;

텍스트 상자의 값을 새 단락에 저장합니다.

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

y.innerHTML = Area.value;

그런 다음 텍스트 상자 앞에 새 단락을 삽입합니다.

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

z.insertBefore(y,area)

텍스트 상자 제거:

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

z.removeChild(area) ;

준비 버튼 제거(마찬가지로 페이지에 버튼이 하나만 있다고 가정):

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

z.removeChild(document.getElementsByTagName('button')[ 0])

편집을 false로 설정: 사용자가 편집을 중지합니다:

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

edit = false 2 }

이벤트
함수 외부에서 전체 페이지에 대한 onclick 이벤트를 설정합니다.

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

document.onclick = catchIt;

번역 주소: http://www.quirksmode.org/dom/cms.html
재인쇄 시 다음 사항을 지켜주세요
저자: Beiyu(tw: @레호크)