javascript - 插入符号位置不跟踪？

Question

我想做的是将关键代码放在一个数组中，以便稍后做一些有趣的事情。因此，我捕获击键，获取插入符位置并将键代码放入数组中(在 MooTools 的帮助下):

var keyArray = [];
$('form').addEvent('keyup', function(event) {
    var pos = document.activeElement.getCaretPosition();

    keyArray[pos] = event.code;
});

一般来说，这很好用。但是，在我的控制台中显示完整数组时，我注意到我的数组中有一些 undefined 值。进一步探索这一点，我发现当快速打字时，插入符号的位置似乎失去了踪迹，或者 react 快/慢。我制作了一个 jsfiddle 来演示:http://jsfiddle.net/HQVR8/1/

如果您在此示例中快速键入，您将看到一个插入符位置序列，如

- 1 - 2 - 3 - 5 - 6 - 6.

但是打字慢的时候，就是

- 1 - 2 - 3 - 4 - 5 - 6. 

当然，现在快速输入的问题是我的数组中有一个 undefined 值，我覆盖了一个数组项。所以结果不一样。

我的问题是我能否以某种方式让插入符位置保持跟踪。我试过使用“本地”selectionStart，但结果是一样的。我还 try catch keydown 事件中的插入符号位置，并将其放入 keyup 事件中的数组中。没有不同。我想知道使用小停顿(即强制用户打字速度变慢)是否可以解决这个问题，但这感觉像是一个 hack，我更喜欢一个“适当”的解决方案。希望有一个。

Answer 1

你基本上是在使用数组而不是对象来制造困惑。

数组索引很狡猾，如果您不小心，可能会创建稀疏数组。例如:

var foo = [];
foo[0] = "one!"; // foo.length = 1;
foo[2] = "two!"; // foo.length = 3, foo[1] = undefined

因此，如果您输入的速度太快而跳过了返回值，它可能就是这样做的。此外，粘贴等可以将插入符进一步向下推......

尽管不能保证所有浏览器中键输入和键输出的顺序，但您可能可以使用一个对象 - 特别是 webkit，它们倾向于重新排序并将数字键放在对象键循环的顶部......但是如果你像“pos”+ caretIndex这样的键前缀，你应该得到FIFO

解决您需要提取没有未定义的实际代码的方法是通过 Array.filter。

例如。

retArray = Array.filter(retArray, function(el) {
    return el !== undefined;
});

对于一个对象，你可以这样做:

console.log(Object.values(foo));