JavaScript : 텍스트 영역의 특정 문자열에 대한 세로 픽셀 위치 찾기

Chrome에서 실행되는 작은 텍스트 편집기의 기초로 HTML 텍스트 영역이 있습니다. 여기에는 검색 기능이 포함되어 있습니다 (브라우저 기능 외에 검색 기능이 필요함). 긴 텍스트의 경우, 발견 된 텍스트를 선택한 후 JavaScript가 올바른 위치로 스크롤해야합니다. 이것은 글꼴의 행 높이에 발견 된 텍스트의 행 번호 (줄 바꿈을 계산하여 얻은 후자)를 곱한 다음 textareaElement.scrollTop ...을 설정하여 정상적으로 작동하지만 텍스트 영역이 줄 바꿈 = "꺼짐"으로 설정된 경우에만 작동합니다. 랩이 끝나면 때로는 줄 바꿈을 세어 행을 계산할 수 없으며 스크롤 위치는 다소 벗어날 것입니다.JavaScript : 텍스트 영역의 특정 문자열에 대한 세로 픽셀 위치 찾기

발견 된 선택한 텍스트의 올바른 위치를 얻으려면 어떻게해야합니까?

출처

2009-10-12 Philipp Lenssen

로깅 콘솔의 검색 기능에 대해 log4javascript에이 문제를 해결했습니다. 내 코드는 검색 결과를 화면 이동하면서 스타일 속성이 변경되는 태그로 검색 결과를 둘러 쌉니다. 처음에는 현재 검색 결과 범위에 scrollIntoView()을 호출했지만 특정 브라우저 (예 : log4javascript는 IE 5를 지원함)에 문제가 있다고 생각하여 offsetLeft 및 offsetTop 속성 및 scrollLeft 속성을 기반으로하는 내 자신의 스크롤 기능을 작성했습니다. scrollTop 컨테이너의 속성. 나는 scrollIntoView()이 Chrome에서 정상적으로 작동 할 것이라고 생각합니다. 그래야만 사용할 수 있습니다.

출처

2009-10-12 08:25:06

답장을 보내 주셔서 감사합니다. scrollIntoView()는 매우 흥미 롭습니다. 나는 div 나 span 엘리먼트를 사용하지는 않는다는 것을 인정해야한다. 그래서 나는 그것이 작동하지 않는다고 생각한다 - 내가보기에 스크롤하고자하는 것은 큰 textarea 엘리먼트 내의 현재 선택된 텍스트 부분 일 뿐이다 ... –

승인. 나는 당신이 원하는 것을 성취 할 수있는 방법을 생각하기 위해 고심하고 있습니다. 텍스트 영역이 고정 너비 글꼴 및 고정 된 수의 열을 사용하는 경우 줄 바꿈 된 줄 수를 계산할 때 사용할 수 있습니다. 그것 이외에, 나는 그것을하는 방법을 볼 수 없다. –

@Phillip Lenssen : 현재 선택 영역을 임시 범위로 감싸서보기로 스크롤 한 다음 DOM 조작을 사용하여 제거 할 수 있습니까? – sirlark

JavaScript : 텍스트 영역의 특정 문자열에 대한 세로 픽셀 위치 찾기

답변

관련 문제