jQuery val () не работает с каретной логикой в ​​Chrome - PullRequest
Новая
       20

jQuery val () не работает с каретной логикой в ​​Chrome

5 голосов
/ 26 мая 2011

Я работаю с полем ввода, для которого я сопоставил коды клавиш, чтобы при вводе с клавиатуры в поле ввода отображался символ другого языка.

Проблема возникает, когда символы достигают конца ввода 'view'. Любой дополнительный ввод для "сопоставленных" символов, которые используют метод 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 неуверен - не работает

I 'Я не уверен, как я могу решить эту проблему, какие-либо идеи?Спасибо

1 Ответ

1 голос
/ 27 мая 2011

Если вы сохраните и добавите в 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, похоже, немного отклонена, поэтому если вы добавите &nbsp;в промежутке с персонажем это работает намного лучше ( обновленная демка )

...