jQuery val() no funciona con la lógica de Caret en Chrome

Question

Estoy trabajando con un campo de entrada que he correlacionado keyCodes para que una entrada de teclado muestre un carácter de idioma diferente en el campo de entrada.

El problema se vuelve cuando los caracteres llegan al final de la entrada 'ver' cualquier entrada adicional para caracteres "mapeados" que están usando el método jQuery val() no se interpretará como una entrada clave desde el navegador, manteniendo el último carácter ingresado siempre visible.

así que tengo que agregar lógica de intercalación (entrada inferior en jsFiddle utiliza la lógica de intercalación) pero esto no funciona en Chrome/(webkit?)

Aquí está un ejemplo de mi jsFiddle. http://jsfiddle.net/dwickwire/S9EKN/

EDIT: He probado con las siguientes versiones, funciona en FF, pero no en Chrome para mí

Mac OS X 10.6.7 Nieve Leapord

Chrome: 11.0.696.68 v, v 11.0.696.71 - no funcionan

Firefox: 4.0.1 - funciona

de Windows Chrome: -v seguro - no funciona

estoy seguro de cómo puedo resolver esto, alguna idea? Gracias

Answer 1

Si guarda y agrega a la posición scrollLeft de la entrada, se actualizará y mantendrá el carácter escrito a la vista. Aunque, falla si hace clic y comienza a escribir en el medio de la entrada.

He actualizado la segunda entrada demo con el siguiente código. También tenga en cuenta que el intervalo de entrada y prueba que se agrega debe tener el mismo tamaño de fuente.

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); 
    } 

}); 

---

Actualización: la posición scrollLeft parecía ser un poco apagado, por lo que si se agrega una   dentro del lapso con el personaje, que funciona mucho mejor (updated demo)