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

将假光标移动到从点击的字符中取出的位置

1 个答案: