Как да проверя keydown на div, че дали е натиснат валиден знак

Вече проверих дали това е зададено от други. Но всеки въпрос се отнасяше само за въвеждане или текстово поле и нямаше идеален отговор за мен. Моля, имайте предвид, че искам това да работи на div keydown. Вече съм задал div tabindex и мога да получа ключови кодове в събитието keydown за този div.

Създавам електронна таблица в javascript с помощта на jQuery. И в електронната таблица потребителят започва да въвежда във всяка клетка във всеки ред във всяка колона. Сега искам да открия дали е натиснат валиден знак, така че да покажа текстовото поле за редактиране веднага в избраната клетка.

Така че, когато преобразувам keyCode в знак с помощта на String.fromCharCode, получавам символ за всичко, дори ако е клавиш shift или ctrl. Така че, това не е това, което искам. Това ще ми даде 2 знака за shift & да кажем G.

Не знам как да проверя дали само валиден знак като a, h, 0, 7 и т.н. е бил натиснат от потребителя, така че да му покажа клетката за редактиране веднага, както прави google sheets или 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
Не. Защо е необходим contenteditable за Keystrokes? Просто tabindex може да го направи.   -  person Rehmat    schedule 20.07.2014

Отговори (1)


arrow_upward
2
arrow_downward

Разреших това сам.

Когато се случи keydown събитие за div, създавам поле 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