편집 가능한 div_javascript 스킬에서 커서 위치에 콘텐츠를 삽입하는 JS 메소드
- WBOY원래의
- 2016-05-16 16:30:552682검색
이 문서의 예는 우리가 사용하는 편집기와 마찬가지로 편집 가능한 div의 지정된 위치에 콘텐츠를 삽입하는 js 방법을 설명하며 참조용으로 모든 사람과 공유됩니다. 구체적인 구현 방법은 다음과 같습니다.
먼저 DIV 편집 모드를 활성화하세요
코드 복사 코드는 다음과 같습니다.
< /div>
contenteditable=true로 설정하여 div의 편집 모드를 활성화하면 DIV에 텍스트 상자처럼 내용을 입력할 수 있습니다.
더 이상 그 주제에 대해 이야기하지 마세요. 커서 위치를 가져오거나 설정하는 방법은 다음과 같습니다.
2단계:
① DIV에서 커서 위치 가져오기
② 커서 위치 변경
코드 복사 코드는 다음과 같습니다.
varcursor = 0;
document.onselectionchange = 함수 () {
var 범위 = document.selection.createRange();
var srcele = range.parentElement(); //현재 요소 가져오기
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; 커서 ) {
copy.moveStart("character", 1); //커서 위치를 변경합니다. 실제로 커서 수를 기록하고 있습니다.
}
}
커서 변경 이벤트를 문서에 바인딩합니다. 커서 위치를 기록하는데 사용됩니다.var 범위 = document.selection.createRange();
var srcele = range.parentElement(); //현재 요소 가져오기
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; 커서 ) {
copy.moveStart("character", 1); //커서 위치를 변경합니다. 실제로 커서 수를 기록하고 있습니다.
}
}
이런 방법으로 DIV의 커서 위치를 알 수 있습니다.
코드 복사 코드는 다음과 같습니다.
function moveEnd(obj) {
lyTXT1.focus();
var r = document.selection.createRange();
//여기서 이동은 현재 커서부터 시작하기 때문에(텍스트 상자는 0부터 시작하는 것 같습니다.) 현재 커서 위치를 가져온 다음 이동할 위치 수를 계산하여 이동할 수 있습니다. 원하는 위치에 커서
r.moveStart('character', lyTXT1.innerText.length - 커서);
r.collapse(true);
r.select();
}
위의 방법을 통해 DIV의 커서를 끝으로 이동할 수 있습니다 var r = document.selection.createRange();
//여기서 이동은 현재 커서부터 시작하기 때문에(텍스트 상자는 0부터 시작하는 것 같습니다.) 현재 커서 위치를 가져온 다음 이동할 위치 수를 계산하여 이동할 수 있습니다. 원하는 위치에 커서
r.moveStart('character', lyTXT1.innerText.length - 커서);
r.collapse(true);
r.select();
}
전체 예시
코드 복사 코드는 다음과 같습니다.
함수 insertHtmlAtCaret(html) {
var sel, 범위;
if (window.getSelection) {
// IE9 및 비 IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
범위 = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment()는 여기서 유용하지만
// 비표준이며 모든 브라우저에서 지원되지 않습니다(예: IE9)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (노드 = el.firstChild) ) {
lastNode = frag.appendChild(노드);
}
range.insertNode(frag);
// 선택 항목 유지
if (마지막 노드) {
범위 = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(범위);
}
}
} else if (document.selection && document.selection.type != "컨트롤") {
//IE<9
document.selection.createRange().pasteHTML(html);
}
}
코드 복사 코드는 다음과 같습니다.
콘텐츠 편집 가능
<스타일>
*{
여백:0;패딩:0;
}
.im-메시지 영역{
너비:98%;
패딩:2px;
높이:75px;
테두리:#000 실선 1px;
배경:#fff;
글꼴:12px/20px arial,"5b8b4f53";
word-wrap:break-word;
오버플로-y:자동;
줄 높이:1;
}
.ul{디스플레이:없음;}
.ul li{
배경색:#CCC;
너비:50px;
}
<스타일>
*{
여백:0;패딩:0;
}
.im-메시지 영역{
너비:98%;
패딩:2px;
높이:75px;
테두리:#000 실선 1px;
배경:#fff;
글꼴:12px/20px arial,"5b8b4f53";
word-wrap:break-word;
오버플로-y:자동;
줄 높이:1;
}
.ul{디스플레이:없음;}
.ul li{
배경색:#CCC;
너비:50px;
}