0

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

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

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

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

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

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

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

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

编辑： 这是我到目前为止所获得的链接；

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

4

1 回答 1

0

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

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;
}

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

于 2013-07-04T11:00:34.843 回答