JavaScript에서 커서 위치에 텍스트 라벨 노드를 삽입하고 추가하는 방법을 자세히 소개합니다.

이 글에서는 JavaScript에서 커서 위치에 텍스트 라벨 노드를 삽입하고 추가하는 자세한 방법을 주로 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터로 살펴보겠습니다

Selection 객체와 Range 객체를 올바르게 사용하여 현재 커서 위치에 텍스트나 노드를 삽입하는 것이 올바른 방법입니다. 그러나 IE와 표준 DOM 방식에서 이 두 객체의 적용 방식은 서로 다릅니다.

아이디어: 먼저 사용자의 선택을 얻습니다(현재 커서 위치는 시작 위치와 끝 위치가 동일한 선택으로 이해될 수 있음). 그런 다음 Selection 개체를 Range 개체로 변환합니다. 목적은 Range 개체의 메서드를 사용하여 콘텐츠를 삽입하는 것입니다. 마지막으로 삽입 작업이 완료된 후 삽입된 콘텐츠 뒤로 커서를 이동합니다.

var sel = win.document.selection; //IE 
var sel = win.getSelection(); //DOM 
var range = sel.createRange(); // IE下 
var range = sel.getRangeAt(0); // DOM下 
if(range.startContainer){ // DOM下 
 sel.removeAllRanges(); // 删除Selection中的所有Range 
 range.deleteContents(); // 清除Range中的内容 
 // 获得Range中的第一个html结点 
 var container = range.startContainer; 
 // 获得Range起点的位移 
 var pos = range.startOffset; 
 // 建一个空Range 
 range = document.createRange(); 
 // 插入内容 
 var cons = win.document.createTextNode(",:),"); 
 if(container.nodeType == 3){// 如是一个TextNode 
 container.insertData(pos, cons.nodeValue); 
 // 改变光标位置 
 range.setEnd(container, pos + cons.nodeValue.length); 
 range.setStart(container, pos + cons.nodeValue.length); 
 }else{// 如果是一个HTML Node 
 var afternode = container.childNodes[pos]; 
 container.insertBefore(cons, afternode); 
 range.setEnd(cons, cons.nodeValue.length); 
 range.setStart(cons, cons.nodeValue.length); 
 } 
 sel.addRange(range); 
}else{// IE下 
 var cnode = range.parentElement(); 
 while(cnode.tagName.toLowerCase() != “body”){ 
 cnodecnode = cnode.parentNode; 
 } 
 if(cnode.id && cnode.id==”rich_txt_editor”){ 
 range.pasteHTML(",:),"); 
 } 
} 
win.focus();

innerHTML과 PasteHTML의 차이점

innerHTML은 속성입니다. 요소 내의 HTML 콘텐츠를 가져오거나 설정할 수 있습니다.

pasteHTML()은 in 지정된 텍스트 영역의 텍스트 또는 HTML을 교체합니다. 이 메서드는 createTextRange() 또는 document.selection.createRange()로 생성된 영역에 적용되어야 합니다.

var oRange = document.selection.createRange(); 
 if(oRange.text!=''){ 
 var oHtml = &#39;<a href="#" rel="external nofollow" target=_blank>oRange.text</a>&#39;; 
 oRange.pasteHTML(oHtml); 
 }

위 내용은 JavaScript에서 커서 위치에 텍스트 라벨 노드를 삽입하고 추가하는 방법을 자세히 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!