Как проверить нажатие клавиши на div, если был нажат допустимый символ

Я уже проверил это, если об этом спросили другие. Но каждый вопрос касался только ввода или текстовой области, и для меня не было идеального ответа. Обратите внимание, что я хочу, чтобы это работало при нажатии клавиши div. Я уже установил div tabindex и могу получить коды клавиш в событии keydown для этого div.

Я создаю электронную таблицу в javascript, используя jQuery. И в электронной таблице пользователь начинает печатать в любой ячейке в любой строке в любом столбце. Теперь я хочу определить, нажат ли допустимый символ, чтобы я сразу показывал текстовое поле редактирования в выбранной ячейке.

Итак, когда я преобразую keyCode в символ с помощью String.fromCharCode, я получаю символ для всего, даже если это клавиша Shift или клавиша ctrl. Значит, это не то, чего я хочу. Это даст мне 2 символа для сдвига и, скажем, G.

Я не знаю, как проверить, был ли пользователь нажат только действительный символ, такой как a, h, 0, 7 и т. Д., Чтобы я сразу показывал ему ячейку редактирования, как это делают листы Google или Microsoft Excel. Кроме того, я мог бы проверить >= 65 и так далее. Но я хочу, чтобы это работало для любого типа клавиатуры на любом языке.

Я уверен, что добиться этого очень сложно, но мне интересно, как это делают Google и Microsoft.

Любая помощь будет оценена.


javascript html jquery spreadsheet keydown
person Rehmat    schedule 13.07.2014    source источник
comment
не могли бы вы создать Fiddle   -  person Amit Soni    schedule 13.07.2014
comment
Покажите код, который вы пробовали. Также укажите, что вы подразумеваете под «допустимым символом».   -  person Jukka K. Korpela    schedule 13.07.2014
comment
Спасибо, ребята, но я решил это сам. Я не могу опубликовать ответ до 8 часов. Так что решение выложу завтра. Спасибо еще раз.   -  person Rehmat    schedule 13.07.2014
comment
Я уверен, что вы также используете атрибут contenteditable, верно?   -  person Luke Madhanga    schedule 19.07.2014
comment
Нет. Почему для нажатий клавиш необходим редактируемый контент? Просто индекс вкладок может это сделать.   -  person Rehmat    schedule 20.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

Я решил это сам.

Когда для div происходит событие keydown, я создаю поле input и добавляю его к телу, а событие keyup прикрепляю к этому полю ввода. В событии keyup я могу легко определить, введено что-то или нет. Если что-то набирается, то пользователь хочет отредактировать ячейку, иначе я могу проверить наличие специальных клавиш, таких как Ctrl+End, Ctrl+ Главная и так далее.

Обратите внимание, что ввод выглядит раздражающим, поскольку он появляется, как только пользователь начинает печатать. Итак, я делаю это где-то в -1000px с position:absolute. Я также пытался сделать поле ввода width и height 0, но тогда я не мог прочитать .val() из поля. Итак, вместо этого я использовал position:absolute; left:-1000px.

Может быть, это поможет кому-то в любых других связанных вещах. Итак, вот код.

$(spreadsheet).keydown(function(e) {
if (e.keyCode == /*movement_keys*/) {
    //move between cells
} else {
    var input = $('<input type="text"  style="position:absolute; left: -1000px; top: 0px;"/>').appendTo('body');
    $(input).focus();
    $(input).keyup(function(e) {
        if ($(this).val() != '') {
            setTimeout(function() { spreadsheet.editCell($(this).val()); }, 1);
        }

        $(this).remove();
        $(spreadsheet).focus();
    });
}

});

Мне пришлось ждать 1ms с помощью функции setTimeout, чтобы сделать фокус идеальным, иначе фокус не переходил на редактор ячеек.

person Rehmat    schedule 14.07.2014