移動虛假光標位置與點擊人物

Question

取我與文字的div使用等寬字體，我需要顯示的地方光標在那裏我點擊，我有帶光標顯示文本的功能：

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鼠標事件的座標：

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 demo

Answer 1

製表符是問題。它是一個單個字符，意味着字符串不會被計算爲text.slice中的四個字符。如果你用四個空格替換\ t，你的問題就解決了。