내가 고정 폭 글꼴을 사용하여 텍스트와 사업부가 있고, 내가 클릭 한 위치에 커서를 표시해야, 내가 커서로 텍스트를 표시하는 기능을 가지고 클릭 문자

Question

에서 촬영 위치 :

function draw() { 
    var text = textarea.val(); 
    var html; 
    if (pos == text.length) { 
     html = encode(text) + '<span class="cursor">&nbsp;</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 마우스 이벤트 좌표 거의 텍스트 (탭 인코딩 함수 (4) 스페이스로 대체된다)의 탭을 포함 할 때를 제외하고 작동

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; 
} 

. 다음을 사용하여 탭을 수정하려고했습니다.

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 demo

Answer 1

입니다. 이 문자는 text.slice에서 4 문자로 계산되지 않는 문자열을 의미합니다. \ t를 네 개의 공백으로 대체하면 문제가 해결됩니다.