Мне нужно выяснить, какой символ был введен в текстовое поле внутри обработчика, вызываемого функцией jQuery keydown. key.which дает мне только код ключа, но мне нужно выяснить, какой символ ASCII key представляет. Как это сделать?
Как декодировать символ, нажатый из обработчика события jQuery keydown()
Ответ 1
Для ввода символов предлагается использовать keypress(), который будет сообщать фактический код ASCII для нажатого символа. Он автоматически заботится о случае письма и игнорирует несимметричные пресеты. В любом случае вы можете использовать fromCharCode() для преобразования в строковое представление. Например.
var c = String.fromCharCode(e.which) // or e.keyCode
Просто помните, что для keydown() и keyup() вам нужно будет следить за случаем, используя состояние e.shiftKey.
Ответ 2
Событие keyPress - это то, что вам нужно, чтобы получить, какой символ был введен. (См. Ниже обходной путь для события keydown).
keydown и keyup укажите код, указывающий, какая клавиша нажата, а keyPress указывает, какой символ был введен.
Используя jQuery e.which, вы можете получить key code и используя String.fromCharCode, вы можете получить который был нажат (включая shiftKey).
DEMO: http://jsfiddle.net/9TyzP/3
Код:
element.on ('keypress', function (e) {
console.log(String.fromCharCode(e.which));
})
Примечание. Я сказал jQuery
e.which, потому что разные браузеры используют разные свойства для хранения этой информации. jQuery нормализует свойство.which, чтобы вы могли надежно использовать его для извлечения key code.
Обходной путь для keydown
Однако вы можете написать простую обходную процедуру, чтобы получить нажатый символ, работающий на keydown. Обходным путем является создание объекта с ключом в качестве charCode без нажатия клавиши shift и значение со сдвигом.
Примечание. Поскольку @Sajjan Sarkar указал, что существуют некоторые отличия в значении ключа e.which, возвращаемом из разных браузеров. Подробнее здесь
Обновлен код DEMO для нормализации значения ключевого кода кросс-браузера. Протестировано и проверено в IE 8, FF и Chrome.
Полный код ниже и обновлен DEMO: http://jsfiddle.net/S2dyB/17/
$(function() {
var _to_ascii = {
'188': '44',
'109': '45',
'190': '46',
'191': '47',
'192': '96',
'220': '92',
'222': '39',
'221': '93',
'219': '91',
'173': '45',
'187': '61', //IE Key codes
'186': '59', //IE Key codes
'189': '45' //IE Key codes
}
var shiftUps = {
"96": "~",
"49": "!",
"50": "@",
"51": "#",
"52": "$",
"53": "%",
"54": "^",
"55": "&",
"56": "*",
"57": "(",
"48": ")",
"45": "_",
"61": "+",
"91": "{",
"93": "}",
"92": "|",
"59": ":",
"39": "\"",
"44": "<",
"46": ">",
"47": "?"
};
$(element).on('keydown', function(e) {
var c = e.which;
//normalize keyCode
if (_to_ascii.hasOwnProperty(c)) {
c = _to_ascii[c];
}
if (!e.shiftKey && (c >= 65 && c <= 90)) {
c = String.fromCharCode(c + 32);
} else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
//get shifted keyCode value
c = shiftUps[c];
} else {
c = String.fromCharCode(c);
}
//$(element).val(c);
}).on('keypress', function(e) {
//$(element).val(String.fromCharCode(e.which));
});
});
Подробнее о событиях с клавиатурой -
При нажатии кнопки нажатия клавиш, нажатия клавиш и нажатия клавиш загорается клавиша.
keydown Пожар, когда пользователь нажал клавишу. Он повторяется, пока пользователь удерживает нажатой клавишу.
keypress Запускает, когда вставлен фактический символ, например, текстовый ввод. Он повторяется, пока пользователь удерживает нажатой клавишу.
keyup Запускает, когда пользователь отпускает ключ, после выполнения действия по умолчанию этого ключа.
Когда клавиша сначала нажата, отправляется событие keydown. Если ключ не является ключом-модификатором, отправляется событие keyPress. Когда пользователь отпускает ключ, отправляется событие keyup.
Когда клавиша нажата и удерживается нажатой, она начинает автоматически повторяться. Это приводит к последовательности событий, подобных следующим:
keydown
keypress
keydown
keypress
<<repeating until the user releases the key>>
keyup
DEMO: http://jsfiddle.net/9TyzP/1/
keyup, keydown vs keypress
События keydown и keyup представляют собой клавиши, которые нажаты или отпущены, в то время как событие нажатия клавиши представляет собой типизируемый символ.
DEMO: http://jsfiddle.net/9TyzP/
Ссылки:
Ответ 3
Я делаю это. Он просто игнорирует нажатие клавиши, если значение не является числом. Кажется, работать без проблем...
$("input").on("keypress", function(e) {
if(!jQuery.isNumeric(String.fromCharCode(e.which)))
return false;
});
Ответ 4
Ответ Selvakumar Arumugam работает как прелесть для меня... пока я не проверю numpad. Итак, небольшое обновление здесь:
$(document).on('keydown', function(e) {
var c = e.which;
if (_to_ascii.hasOwnProperty(c)) {
c = _to_ascii[c];
}
if (!e.shiftKey && (c >= 65 && c <= 90)) {
c = String.fromCharCode(c + 32);
} else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
c = shiftUps[c];
} else if (96 <= c && c <= 105) {
c = String.fromCharCode(c - 48);
}else {
c = String.fromCharCode(c);
}
$kd.val(c);
})
Ответ 5
Я создал и использовал вышеперечисленный класс javascript для преобразования gr в en символов. Он может использоваться для большего количества языков. Он использует JQuery для изменения значения, нажатого пользователем.
var CharMapper = function (selector) {
this.getLanguageMapper = function (languageSource, languageTarget) {
// Check if the map is already defined.
if (typeof langugageCharMap === "undefined") {
langugageCharMap = {};
}
if (typeof langugageCharMap[languageSource] === "undefined") {
langugageCharMap[languageSource] = {};
}
// Initialize or get the language mapper.
if (typeof langugageCharMap[languageSource][languageTarget] === "undefined") {
switch (languageSource) {
case "GR":
switch (languageTarget) {
case "EN":
langugageCharMap[languageSource][languageTarget] = {
"α": "a", "ά": "a", "β": "b", "γ": "g", "δ": "d", "ε": "e", "έ": "e", "ζ": "z", "η": "h", "ή": "h", "θ": "th", "ι": "i", "ί": "i", "ϊ": "i", "ΐ": "i", "κ": "k", "λ": "l", "μ": "m", "ν": "n", "ξ": "ks", "ο": "o", "ό": "o", "π": "p", "ρ": "r", "σ": "s", "ς": "s", "τ": "t", "υ": "y", "ύ": "y", "ϋ": "y", "ΰ": "y", "φ": "f", "χ": "x", "ψ": "ps", "ω": "o", "ώ": "o", "Α": "A", "Ά": "A", "Β": "B", "Γ": "G", "Δ": "D", "Ε": "E", "Έ": "E", "Ζ": "Z", "Η": "H", "Ή": "H", "Θ": "TH", "Ι": "I", "Ί": "I", "Ϊ": "I", "Κ": "K", "Λ": "L", "Μ": "M", "Ν": "N", "Ξ": "KS", "Ο": "O", "Ό": "O", "Π": "P", "Ρ": "R", "Σ": "S", "Τ": "T", "Υ": "Y", "Ύ": "Y", "Ϋ": "Y", "Φ": "F", "Χ": "X", "Ψ": "PS", "Ω": "O", "Ώ": "O"
};
break;
case "GR":
default:
throw "Language(" + languageTarget + ") is not supported as target for Language(" + languageSource + ").";
}
break;
case "EN":
default:
throw "Language(" + languageSource + ") is not supported as source.";
}
}
return langugageCharMap[languageSource][languageTarget];
};
// Check the existance of the attribute.
var items = $(selector).find("*[data-mapkey]");
if (items.length === 0) {
return;
}
// For each item.
for (var i = 0; i < items.length; i++) {
var item = items[i];
// Get the source and target language.
var languages = $(item).attr("data-mapkey");
var languageSource = languages.split("_")[0];
var languageTarget = languages.split("_")[1];
// Add the event listener.
var self = this;
$(item).keypress(function (event) {
event.stopPropagation();
// Get the mapper to use.
var mapper = self.getLanguageMapper(languageSource, languageTarget);
// Get the key pressed.
var keyPressed = String.fromCharCode(event.which);
// Get the key to set. In case it doesn't exist in the mapper, get the key pressed.
var keyToSet = mapper[keyPressed] || keyPressed;
// Set the key to the dom.
this.value = this.value + keyToSet;
// Do not propagate.
return false;
});
}
};
Пример
<input type="text" data-mapkey="GR_EN" />
<script type="text/javascript">
new CharMapper("body");
</script>