내용 편집 가능 div에서 커서 행과 열 가져 오기

사용자가 내용 편집 가능 div에서 텍스트를 입력 할 때 커서 위치를 찾는 방법이 몇 가지 있지만 그 중 아무 것도 작동시키지 못합니다. 사실, 가장 간단한 코드에서 가장 놀라운 결과를 얻었습니다. 이 스 니펫에서 텍스트를 추가하고 백 스페이스를 사용하여 제거하면 시작 오프셋이 실제로 증가합니다! (그 분할 요소 또는 뭔가를 상상할 수있는 오프셋 인쇄 할 수없는 태그 또는 뭔가가 포함될 수 있습니다.)내용 편집 가능 div에서 커서 행과 열 가져 오기

나는 고정 글꼴을 가질 것이지만 구문 강조를 추가 할 계획이있는 div가 있습니다. 단지 할;는 더 대화 형 프롬프트를 편집 어디에서나 스크립트에서 차종의 종류 나 위치에 자신을 싶어하고 왜 감지 경우)

<html> 
<head> 
<script type="text/javascript"> 
<!-- 
var ta = null; 

function onKeypress(event) { 
    var range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeypress = onKeypress; 
} 
//--> 
</script> 
<body onload="init();"> 
<noscript> 
Sorry, you need javascript. Not much to see here otherwise; move along. 
</noscript> 
<p id="msg"></p><hr/> 
<div id="ta" contenteditable="true" style="width:100%; height:100%; font-family: courier;"> 
</div> 
</body> 
</html>

어떻게 행과 열을 알고, 텍스트를 얻을 수 있습니다. 어떤 행에 대해서도 이러한 내용을 편집 할 수있는 div에 있습니까?

출처

2012-03-31 Will

내가 무엇을 당신이 말하는 것은 코드에 문제가 있습니다 확실하지 않다. Chrome에서 예제 코드를 테스트 할 때 코드가 작동하는 것 같습니다. div에 더 많은 텍스트를 입력하기 시작할 때까지 위치 표시가 업데이트되지 않지만 위치 표시가 다시 정확할 때까지 위치 표시가 업데이트되지 않습니다. 백 스페이스가 keyup 이벤트를 트리거하지 않거나 내가 누락 된 다른 문제가 있습니까? – Griffin

아, 이해가된다고 생각합니다. 답변을 올렸습니다. – Griffin

-1

div 대신 텍스트 상자를 사용하셨습니까?

<textbox>edit my content</textbox>

당신은 당신이 (AN onKeyDown에에 때 onKeyPress을 변경하면 innerHTML 속성

alert(document.getElementById('theIdOfMyDiv').innerHTML);

또는 추가 내용

var currentContent = document.getElementById('theIdOfMyDiv').innerHTML; 
currentContent = currentContent + 'add some content';

출처

2012-04-01 10:42:53 codelove

질문을 읽었습니까? – Griffin

질문을 이해하기 위해 +1 – codelove

와 그 내용을 얻을하고 업데이트 할 수 있습니다 사업부를 사용해야하는 경우 백 스페이스가 캡처 됨) 백 스페이스가 입력되면 위치 표시가 한 번 증가합니다.

것은 내가 스틱의 잘못 끝을 가지고 있다면 용서,하지만 난 하나 개의 솔루션은 다음을 수행 믿습니다 :

var ta = null; 
var range = null; 

function onKeyDown(event) { 
    if(event.which != 8 && event.which != 46) { 
     range = window.getSelection().getRangeAt(0); 
     document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
    } 
} 

function onKeyUp(event) { 
    range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeydown = onKeyDown; 
    ta.onkeyup = onKeyUp; 
}

출처

2012-04-01 15:29:26 Griffin

Enter 키를 누르면 어떻게됩니까? – Will

다시 0부터 카운팅을 시작합니다. 커서에 커서가있는 행을 표시하는 코드는 없습니다. – Griffin

하지만 그게 더 큰 질문입니다! "어떻게 내용을 편집 할 수있는 div에서 행과 열을 알 수 있고 모든 행의 텍스트를 가져올 수 있습니까?" 이것은 리치 텍스트 편집기와 같기 때문에 사용자가 키를 누를 때마다 나는 자신이 어떤 라인에 있는지, 라인 내용이 무엇인지 알고 싶습니다. – Will

내용 편집 가능 div에서 커서 행과 열 가져 오기

답변

관련 문제