contentEditable
, textarea
또는 input
가지가없는 웹 기반 텍스트 편집기를 개발하고 있습니다. 가장 큰 부분은 현재 caret 위치에서 왼쪽 (오른쪽) 텍스트의 너비를 측정하고 텍스트에서 캐럿을 이동하는 것입니다.웹 기반 텍스트 편집기에서 문자 당 하나의 <span>
예를 들어 사용자가 DOWN 키를 누르면 캐럿의 현재 왼쪽 오프셋을 계산해야하며 아래 줄에 가장 비슷한 문자가 있어야합니다.
문자 하나 당 하나의 DOM 요소를 사용하는 것이 매우 편리합니다. offsetLeft
속성을 볼 수 있습니다. 또한 캐럿의 위치를 지정하는 것이 훨씬 쉽습니다. 사실, 모든 것이 더 쉽습니다.
그러나 성능상의 영향에 대해서는 매우 확신이 없습니다.. 나는이 기술 (또는 이와 유사한)을 일부 웹 기반 JavaScript "IDE"에서 사용하는 것으로보고 있으며 거기에서 잘 작동합니다.
힌트, 팁이 있습니까?
텍스트의 너비를 측정하는 다른 빠른 방법을 알고 계십니까? 나는 DOM 엘리먼트에 라인의 섹션을 두지 않고 매번 너비를 측정하는 것이 훨씬 느릴 것이라고 생각한다.
편집 : 대부분 DOM 요소가 존재한다는 주요 사실에 대해 주로 묻고 있습니다. 측정을하는 방법은 다른 것입니다.
그 흥미 동안 가치보다 아마 더 문제 같은데, 설명하는 문제는 정말 간단하기 때문에, jsvi 존재하지 않습니다 고정 폭 글꼴을 사용합니다. 캐럿이 변경되지 않기 때문에 위 또는 아래로 이동할 때 캐럿의 x 위치를 계산할 필요가 없습니다. – glomad
나는 대부분 dom 요소의 존재에 대한 주요 사실에 대해 주로 묻고있다. 측정을하는 방법은 다른 것입니다. – tillda