Question

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

问题变为当字符到达输入'view'的末尾时，使用jQuery val（）方法的“映射”字符的任何附加输入将不会被解释为来自浏览器的键输入，因此保持最后一个输入的字符始终可见。

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

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

编辑：我使用以下版本进行了测试，适用于FF但不适用于我的

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）

jQuery val（）不能与Chrome中的Caret逻辑一起使用

1 个答案: