javascript中的自定义文本编辑器布局引擎

Question

我正在用 javascript 构建一个自定义输入字段。 （即不使用内容可编辑、输入、文本区域或 iframe）。

我需要它来支持 textarea 字段中的基本选项，例如：

• 鼠标点击光标位置
• 选择
• 复制/粘贴
  ...

此时我正在侦听底层输入字段上的按键。 当一个键被按下时：
1.键String.fromCharCode(event.keyCode)的值被传递给一个tmp span。
2. 测量跨度的宽度，并存储在一个数组中。
3. 插入符号的位置是使用大小数组计算的

这在 chrome 中或多或少有效，但在使用 internet explorer 9 时，插入符号似乎偏离了位置。

似乎是单个容器的容器宽度，与该字符插入字符串时的宽度不匹配。

我猜这与步骤 2 中字母大小的计算方式有关。但我不太清楚如何解决这个问题。

有没有人有这个问题的经验，或者用一些文献、博客 API 等为我指明正确的方向？ - 那太好了！

编辑： Here is a link to what i've got so far;

注意：在 chrome 中工作，并且在 ie: 9 和 10 中有提到的缺陷 它在Firefox中坏了:)

Answer 1

如果你想知道每个字符在字段中的位置可以尝试获取前面子串的宽度：

var text = $content.text(),
    positions = [0],
    $ghost = $("<span class='ghost'>").appendTo($content);
for (var i = 1; i < text.length; i++) {
    $ghost.text(text.substring(0, i));
    positions.push($ghost.width());
}
$ghost.remove();

这是您需要的 CSS：

.ghost {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}

请记住，每次获取元素的大小时，都会导致文档重排。不过，对于绝对定位的元素来说，这应该不是问题。