jQuery val() 不适用于 Chrome 中的插入符号逻辑

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 位置，它将更新并保持输入的字符在视图中。但是，如果您在输入的中间单击并开始输入，它会失败。

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

input_2.bind('keydown.keyboard', function(e) {
    var key = "",
        current_val = input_2.val(),
        pos = input_2.caret(),
        start_pos = pos.start,
        end_pos = pos.end,
        scroll = $(this).scrollLeft();

    // some mapped keys
    switch (e.which) {
        // e key
    case 69:
        key = "ε";
        e.preventDefault();
        break;
        // f key            
    case 70:
        key = "φ";
        e.preventDefault();
        break;
        // z key                
    case 90:
        key = "ζ";
        e.preventDefault();
        break;
        // a key
    case 65:
        key = "α";
        e.preventDefault();
        break;
    }

    if (key !== '') {
        var test = $('<span class="test">&nbsp;' + key + '</span>').appendTo('body');
        scroll += test.width();
        test.remove();
    }

    input_2.val(current_val + key);
    //Insert/Replace text at caret then restore caret        
    input_2.value = current_val.substr(0, start_pos) + key + current_val.substr(end_pos, current_val.length);
    input_2.caret(start_pos + key.length, start_pos + key.length);
    if (key !== '') {
        $(this).scrollLeft(scroll);
    }

});

---

更新：scrollLeft 位置似乎有点偏离，所以如果你在字符的范围内添加一个 ，效果会更好 (updated demo)