JavaScript에서 IntelliSense/자동 완성 기능 구현

Question

저는 현재 마크 업 언어를 구현 한 포럼 웹 사이트에 여러 가지 기능을 추가하는 Firefox 용 애드온을 유지하고 있으며, 이는 stackoverflow에서 제공하는 "Markdown"과 유사합니다.

이 부가 기능에 대해 IntelliSense 기능을 내장했습니다.이 기능은 Visual Studio와 유사하게 텍스트 영역에이 마크 업을 입력 할 때 자동 제안을 팝업합니다. 예 :

http://members.lycos.co.uk/suffusion/namfox/faq-1.5/autocomplete-example-2-1.jpg

구현에 대한 가장 어려운 점은 (x, y)를 찾는 것입니다 그래서 나는 팝업 수 있습니다 그것은 매우 가까운 인텔리 창을 텍스트 영역에서 키를 누르는 좌표. 자바 스크립트의 keypress 이벤트는 이러한 좌표를 노출시키지 않으므로이 문제를 해결해야합니다. 불행히도 x 좌표가 아닌 y 좌표를 얻을 수있는 브라우저 간 호환 방법 만 찾을 수있었습니다. 이 코드는 _getPopupPoint 함수에 here에 있습니다.

Mozilla의 XPCOM 인터페이스를 사용하여 좌표를 가져 오기 때문에 Firefox에서 작동합니다. 따라서 Firefox 용으로 작동하지만 Google 크롬에 추가 기능을 추가하고자 할 때 좌표를 가져올 방법을 찾지 못했습니다.

그럼 제가 묻는 것은 이중입니다 : (1) 키를 누르는 것보다 x 좌표를 얻는 더 좋은 방법이 있습니까? (2) 그렇지 않은 경우 동일한 데이터를 가져 오기 위해 Google 크롬 부가 기능과 관련하여 할 수있는 일이 있습니까?

Answer 1

event object in DOJO toolkit의 구현을 점검하는 것이 재미있을 수 있습니다.

도장은 이벤트 객체는 다음과 같은 속성 제공 - 이벤트

event.currentTarget 생성 요소 -

• event.target를 현재 대상에게
• event.layerX을 - x 좌표 event.currentTarget에 상대적입니다.
• event.layerY - event.currentTarget을 기준으로 한 y 좌표
• event.pageX -보기 포트에 상대적인 x 좌표
• event.pageY -은 y 좌표, 뷰 포트
• event.relatedTarget을 기준으로 - onMouseover와와 onmouseout의 경우는, 객체는 마우스 포인터 또는
• event.charCode 밖으로 이동된다 - 키 누르기 이벤트의 , 키 눌렀을 때의 문자 코드
• event.keyCode - 키 누르기 이벤트의 경우 ENTER와 스페이스 바 같은 특수 키를 처리합니다.
• event.charOrCode - 알파 키와 특수 키를 직접 비교할 때 사용할 수있는 charCode와 keyCode의 정규화 된 버전입니다. (1.1에 추가)

Answer 2

window.getSelection 및 관련 방법이 귀하가 찾고있는 것일 수 있습니다. offset 등의 함수를 사용하여 캐럿의 화면 위치를 계산할 수 있습니다.