移动虚假光标位置与点击人物

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，你的问题就解决了。