javascript - jQuery val() 无法在 Chrome 中使用 Caret 逻辑

Question

我正在使用一个输入字段，我已经为其映射了键代码，这样键盘输入就会将不同的语言字符呈现到输入字段中。

当字符到达输入“view”的末尾时，使用 jQuery val() 方法的“映射”字符的任何额外输入都不会被解释为来自浏览器的键输入，因此保留最后一个输入的字符始终可见。

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

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

编辑:我测试了以下版本，在 FF 中工作，但对我来说在 Chrome 中不工作

Mac 雪豹 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 位置，它将更新并保持输入的字符在 View 中。虽然，如果您在输入的中间单击并开始输入，它会失败。

我更新了第二个输入 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 )