javascript의 사용자 정의 텍스트 편집기 레이아웃 엔진

Question

javascript에 사용자 정의 입력 필드를 구축하고 있습니다. (예 : 이 아닌 콘텐츠 편집 가능, 입력, 텍스트 영역 또는 iframe 사용).

커서 위치에 대한
• 마우스 클릭
• 선택
• 복사/붙여 넣기
  ...

:

나는 그것이 텍스트 영역 필드 등의 기본 옵션을 지원해야 이 시점에서 기본 입력 필드에 keypress 수신 대기합니다. 키를 누를 때 :
1. String.fromCharCode(event.keyCode) 키의 값이 tmp 범위로 전달됩니다.
2. 범위의 너비가 측정되고 배열에 저장됩니다.
3 캐럿 위치는 크기

이 크롬에 더 많거나 적은 작업의 배열을 사용하여 계산하지만, 인터넷 익스플로러 9를 사용하는 경우, 캐럿 위치 나갈 것으로 보인다.

단일 컨테이너가있는 컨테이너의 너비가 문자열에 삽입 될 때 해당 문자의 너비와 일치하지 않는 것 같습니다.

2 단계에서 문자의 크기가 계산되는 방식과 관련이 있습니다. 그러나이 문제에 대해 어떻게 생각하는지 알 수 없습니다.

누구든지이 문제에 경험이 있거나 일부 의사, 블로그 api와 같은 올바른 방향으로 나를 가리 키지 않습니까? - 좋을거야!

편집 : Here is a link to what i've got so far;

주의 : 크롬에서 작동하고, 즉,에서 언급 한 결함이 : 9와 10은 파이어 폭스 :)에 생겼습니다 을

Answer 1

당신은 당신이 얻을 것을 시도 할 수있는 필드의 각 문자의 위치를 ​​알고 싶다면 앞의 문자열의 폭 :

.ghost { 
    visibility: hidden; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

때마다 당신은 요소의 크기를 얻을 유의 사항 :

var text = $content.text(), 
    positions = [0], 
    $ghost = $("<span class='ghost'>").appendTo($content); 
for (var i = 1; i < text.length; i++) { 
    $ghost.text(text.substring(0, i)); 
    positions.push($ghost.width()); 
} 
$ghost.remove(); 

이 당신이 필요로하는 CSS입니다 문서 리플 로우가 발생합니다. 그것은 절대적으로 배치 된 요소에 대해서는 문제가되어서는 안됩니다.