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

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

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

• 鼠标单击以确定光标位置
• 挑选
• 复制/粘贴
  

此时，我正在监听底层输入字段上的按键。 按键时：
1.键

String.fromCharCode（event.keyCode）

的值被传递到tmp范围。
2.测量跨度的宽度，并将其存储在数组中。
3.插入符号位置使用大小数组计算

这在chrome中或多或少都能起作用，但在使用InternetExplorer9时，插入符号似乎不合适

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

我猜这与第二步如何计算字母大小有关。但我不太明白如何解决这个问题

有没有人对这个问题有经验，或者用一些乱七八糟的东西、博客API或其他东西为我指出了正确的方向那太好了

编辑： ;

注：在铬合金中工作，并且在ie:9和10中存在上述缺陷

---

它在firefox中被破坏：）

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

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();

---

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

除了计算插入符号的位置之外，您确定没有其他方法放置插入符号吗？你为什么不写些代码呢？例如，你的DOM是什么样子的？一个指向一些脏代码的链接已经附加到了原始帖子上。“你会建议用哪些其他方式定位插入符号？这并不能回答问题，我正在寻找的是一种确定ie中角色大小的方法。如果我采用你的解决方案，我将无法进行鼠标交互，因为我不知道在单击时将插入符号放置在何处。@t如果你不详细发布你想做的事，请不要期待完美的答案。请记住，由于浮点精度大小的舍入，单个字符的测量不可能精确。用户交互根本不容易复制。这就是为什么web开发人员使用

字段，或者最多使用

contenteditable

元素的原因。是的，我知道浮点的用途。我试着在屏幕上添加几个l，发现一行四个l所需的像素比一个l少一个。然而，在chrome中，大小是正确的，可能是因为它每个字符都有一个int px，或者可能是因为我使用的大小很幸运？是否可以强制字体的宽度为EXACT整数？也许是使用css？@TauSand不幸的是，这完全由浏览器控制。你能做的最好的事情是计算整个子串的起始值，而不是单个字符的起始值，以减少近似值的影响。我已经改变了我的答案来说明这项技术。感谢您的尝试，我尝试了一个真正的实现，但是它在超过40个字符的情况下效果很差。并扼杀了实时感。我知道这是可以做到的，因为谷歌文档的谷歌团队做到了，我只是想知道如何做到。

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