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

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 替换为四个空格，问题就解决了。