jQuery val()不能与Chrome中的Caret逻辑一起使用

Question

我正在使用一个输入字段,我已经映射了keyCodes,以便键盘输入将在输入字段中呈现不同的语言字符.

问题变为当字符到达输入"视图"的末尾时,使用jQuery val()方法的"映射"字符的任何附加输入将不会被解释为来自浏览器的键输入,因此始终保持最后输入的字符可见.

所以我必须添加插入符逻辑(jsfiddle中的底部输入使用插入符逻辑)但这不适用于Chrome /(webkit？)

这是我的例子的jsfiddle. http://jsfiddle.net/dwickwire/S9EKN/

编辑:我测试了以下版本,适用于FF但不适用于Chrome

Mac Snow Leapord OSX 10.6.7

Chrome:v 11.0.696.68,v 11.0.696.71 - 不起作用

Firefox:4.0.1 - 有效

Windows Chrome:-v不确定 - 不起作用

我不确定如何解决这个问题,任何想法？谢谢

Answer 1

如果您保存并添加到scrollLeft输入的位置，它将更新并保留键入的字符在视图中。不过，如果您单击并在输入中间开始输入，则会失败。

\n\n

我用下面的代码更新了第二个输入演示。另请注意，添加的输入和测试范围应具有相同的字体大小。

\n\n

input_2.bind(\'keydown.keyboard\', function(e) {\n    var key = "",\n        current_val = input_2.val(),\n        pos = input_2.caret(),\n        start_pos = pos.start,\n        end_pos = pos.end,\n        scroll = $(this).scrollLeft();\n\n    // some mapped keys\n    switch (e.which) {\n        // e key\n    case 69:\n        key = "\xce\xb5";\n        e.preventDefault();\n        break;\n        // f key            \n    case 70:\n        key = "\xcf\x86";\n        e.preventDefault();\n        break;\n        // z key                \n    case 90:\n        key = "\xce\xb6";\n        e.preventDefault();\n        break;\n        // a key\n    case 65:\n        key = "\xce\xb1";\n        e.preventDefault();\n        break;\n    }\n\n    if (key !== \'\') {\n        var test = $(\'<span class="test">&nbsp;\' + key + \'</span>\').appendTo(\'body\');\n        scroll += test.width();\n        test.remove();\n    }\n\n    input_2.val(current_val + key);\n    //Insert/Replace text at caret then restore caret        \n    input_2.value = current_val.substr(0, start_pos) + key + current_val.substr(end_pos, current_val.length);\n    input_2.caret(start_pos + key.length, start_pos + key.length);\n    if (key !== \'\') {\n        $(this).scrollLeft(scroll);\n    }\n\n});\n

\n\n\n\n

更新：scrollLeft 位置似乎有点偏离，所以如果您在 带有字符的范围内添加一个，效果会更好（更新的演示）

\n