将假光标移动到从单击字符获取的位置

Question

我有一个div文本使用单space字体，我需要在我点击的地方显示一个光标，我有显示光标文本的函数：

  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 spaces）。我尝试使用此修复选项卡：

  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;

但这行不通。当我单击可能属于选项卡的 space 时，它也应该适用于这种情况。文本包含制表符时如何解决？

这里是codepen demo

Answer 1

制表符是问题所在。它是单个字符，这意味着它在 text.slice 中不是按四个字符计算的字符串。如果您将 \t 替换为四个空格，您的问题就解决了。

将假光标移动到从单击字符获取的位置

move fake cursor to position taken from clicked character

javascript

cursor-position