Reputation: 2696
The question seems weird but let me tell you the story:
As you might know e.keycode
gained from keyup
differs from e.keyCode
in keypress
specially when its about bilingual cases.
For instance when the keyboard language is Persian and I press A
, e.keyCode on key press returns 1588
while e.keyCode on keyup returns 65
.
I need to get access to e.keycode offered by keyup when I'm handling keypress, I used data(), but there is a delay to value be set, something like following:
$("#textBox").on("keyup", function(e){
var keycode = e.keyCode;
$(this).data('code-on-keyup', keycode);
})
$("#textBox").on("keypress", function(e){
var keycodeOnKeypress = e.keyCode,
keycodeOnKeyup = $(this).data('code-on-keyup');
console.log(keycodeOnKeypress, keycodeOnKeyup);
});
I get undefined
for keycodeOnKeyup at the first time and the next time I get keycode generated from one step before.
You might suggest to use setTimeout()
for keypress but it doesn't sound good, can't I send it as a parameter?
would you suggest me a method to get access to it?
Update:
Thanks to @Amadan, that was easier that what I thought, I should have used keydown
instead of keyup
:
$("#textBox").on("keydown", function(e){
var keycode = e.keyCode;
$(this).data('code-on-keydown', keycode);
})
$("#textBox").on("keypress", function(e){
var keycodeOnKeypress = e.keyCode,
keycodeOnKeydown = $(this).data('code-on-keydown');
console.log(keycodeOnKeypress, keycodeOnKeydown);
});
Upvotes: 1
Views: 760
Reputation: 3993
$( document ).ready(function() {
var theText = $("#theText");
var theOutputText = ("#theOutputText");
var theOutputKeyPress = ("#theOutputKeyPress");
var theOutputKeyDown = ("#theOutputKeyDown");
var theOutputKeyUp = ("#theOutputKeyUp");
var theOutputFocusOut = ("#theOutputFocusOut");
theText.keypress(function (event) {
console.log('keypress');
keyReport(event, theOutputKeyPress);
theText.keyup(function (event) {
console.log('keyup');
keyReport(event, theOutputKeyUp);
});
});
function keyReport(event, output) {
// catch enter key = submit (Safari on iPhone=10)
if (event.which == 10 || event.which == 13) {
event.preventDefault();
}
// show event.which
console.log("Event\t" +event.which + "\tkeyCode\t" + event.keyCode);
// report invisible keys
switch (event.which) {
case 0:
output.append("event.which not sure");
break;
case 13:
output.append(" Enter");
break;
case 27:
output.append(" Escape");
break;
case 35:
output.append(" End");
break;
case 36:
output.append(" Home");
break;
}
// show field content
console.log(theText.val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<fieldset>
<label for="theText">Enter some text</label>
<input id="theText" type="text" />
</fieldset>
</form>
Upvotes: 1
Reputation: 1991
As you might read keyCode property is deprecated, to overcome this you can use "key" property:
eventObject.key.charCodeAt(0)
So your code might be like
$("#textBox").on("keyup", function(e){
var keycode = e.originalEvent.key.charCodeAt(0);
$(this).data('code-on-keyup', keycode);
})
$("#textBox").on("keypress", function(e){
var keycodeOnKeypress = e.originalEvent.key.charCodeAt(0),
keycodeOnKeyup = $(this).data('code-on-keyup');
console.log(keycodeOnKeypress, keycodeOnKeyup);
});
Upvotes: 0