Question

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

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

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

此时我正在监听基础输入字段上的按键。按下某个键时：
1.键String.fromCharCode(event.keyCode)的值传递给tmp span 2.测量跨度的宽度，并以阵列形式存储 3.使用尺寸数组计算插入位置

这在chrome中或多或少有效，但在使用Internet Explorer 9时，插入符号似乎不合适。

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

我猜这与在第2步中如何计算字母的大小有关。但我无法弄清楚如何解决这个问题。

有没有人有过这个问题的经验，或者指出一些正确的方向，博客apis，什么？ - 那太棒了！

编辑： 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;
}

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

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

1 个答案: