고정 폭 글꼴을 사용하는 텍스트가있는 div가 있고 클릭 한 위치에 커서를 표시해야합니다. 커서로 텍스트를 표시하는 기능이 있습니다.
function draw() {
var text = textarea.val();
var html;
if (pos == text.length) {
html = encode(text) + '<span class="cursor"> </span>';
} else {
html = encode(text.slice(0, pos)) + '<span class="cursor">' +
encode(text[pos+1]) + '</span>' + encode(text.slice(pos+1));
}
output.html(html);
}
마우스 이벤트의 x / y 좌표를 기반으로 커서 위치를 가져 오는 함수 :
function get_char_pos(div, text, event) {
var num_chars = get_num_chars(div);
var cursor = div.find('.cursor');
var rect = cursor[0].getBoundingClientRect();
var width = rect.width;
var height = rect.height;
var offset = div.offset();
var col = Math.floor((event.pageX-offset.left)/width);
var row = Math.floor((event.pageY-offset.top)/height);
var try_pos = col + (row > 0 ? num_chars * row : 0);
return try_pos;
}
텍스트에 탭이 포함 된 경우를 제외하고는 거의 작동합니다 (인코딩 기능에 의해 탭이 4 개의 공백으로 대체 됨). 나는 이것을 사용하여 탭을 수정하려고했습니다.
var before = text.slice(0, try_pos);
var tabs = before.match(/\t/g);
var fix = tabs ? tabs * 3 : 0;
try_pos += fix;
return try_pos > text.length ? text.lenght : try_pos;
그러나 이것은 작동하지 않습니다. 탭의 일부일 수있는 공간을 클릭 할 때도 작동합니다. 텍스트에 탭이 포함 된 경우 문제를 해결하는 방법은 무엇입니까?
다음은 codepen 데모입니다.
탭 문자가 문제입니다. 단일 문자로 text.slice에서 4 자로 계산되지 않는 문자열을 의미합니다. \ t를 공백 4 개로 바꾸면 문제가 해결됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다