I have written a simple javascript code and added event listener for onKeyDown/onKeyUp . It works just fine and detects the Control key as required. However the Control key shows pressed even when I am using OS shortcuts.
To be specific I am on Ubuntu and use Ctrl+Alt+ arrow keys to switch workspaces. So when I switch the workspace and come back to Chrome, it shows Control key pressed already.
I dont mind it but even when the shortcut keys are released, onkeyup method is not called and hence the status shows Ctrl key pressed.
How do I avoid this?
Below is my code:
function keypressedfn(e){
if(e.which == CTRL_KEY){
console.log("isCtrl pressed");
isCtrl=true;
if(isWheel){
e.preventDefault();
e.stopPropagation();
}
}
};
function keyreleasedfn(e){
if(e.which == CTRL_KEY){
console.log("isCtrl released");
isCtrl=false;
isWheel=false;
}
};
$(document).ready(function(){
$(document).keydown(keypressedfn);
$(document).keyup(keyreleasedfn);
});
if you're using Ctrl to change workspaces, then your window w/ js running is losing focus before the keyup event.
you could bind an event to the window object that discards keydown whenever the window loses focus:
window.onblur = function(){console.log("blur");};
without seeing more of your code i can't say much more than that
It is not standard practice to detect the KeyDown event of Control key (or Alt, or Shift, for that matter).
What you should do is find if your desired key is pressed. For example, if you want to save something when Ctrl+S is pressed, look for S key.
var keyCode = (e.which) ? e.which : e.keyCode; // keyCode will be 'S'
if (e.ctrlKey && keyCode == 83) {
// Ctrl + S pressed. Do stuff.
}
Related
Some clients have been reporting issues when using their iPad Bluetooth keyboards for entering text into one of our internal sites. Mainly pressing enter on a certain input would work fine when using desktop or the iPad on screen keyboard, but not when using a Bluetooth keyboard connected to the iPad.
Upon investigation it appears that any input to an onKeyUp returns 0 as the keycode when connected to a Bluetooth keyboard on the iPad. The demo works fine, however when using the onscreen keyboard it doesn't work because of the keycode returning 0. I created this jsFiddle to demonstrate. It was tested on both Chrome and Safari for iPad with the same results of working fine with onKeyPress but returning only 0 with onKeyUp.
$('#inputKeyUp').keyup(function (event){
$("#outputKeyUp").text("Key Up Key: " + event.which);
});
$('#inputKeyPress').keypress(function (event){
$("#outputKeyPress").text("Key Press Key: " + event.which);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="inputKeyUp">keyup</textarea>
<div id="outputKeyUp">Key Up Key:</div>
<b/>
<textarea id="inputKeyPress">keypress</textarea>
<div id="outputKeyPress">Key Press Key:</div>
EDIT: just reported the bug to Apple. We will see if anything comes of it.
Testing study
I did some testing on this just now and discovered that on the keyUp event when using a Bluetooth keyboard on iOS Safari, the only keys that give any sort of proper feedback in terms of the properties e.key, e.charCode, e.keyCode and e.which are the following keys:
Escape
Up arrow
Left arrow
Right arrow
Down arrow
All other keys return the following:
{
key: "Dead",
charCode: 0,
keyCode: 0,
which: 0
}
These special keys (escape and arrow keys) only return a different value on the e.key property according to the syntax UIKeyInput{PascalCasedKeyName}:
UIKeyInputEscape
UIKeyInputUpArrow
UIKeyInputLeftArrow
UIKeyInputRightArrow
UIKeyInputDownArrow
Summary
On iOS, the only keys you can identify on the keyUp event, based on my quick study, are Escape and the four Arrow keys, by matching their name on the e.key property. These values also appear on the keyDown event.
If you still need to wait until the keyUp event fires for your applications, and you need to match keys other than these special ones, the only solution I can come up with is to use a keyDown event for capturing the key, but then listen for the keyUp event inside that keyDown event like so:
el.addEventListener("keydown", e => {
if (e.which === 13) // Enter key, or which ever key code you'd like
el.addEventListener("keyup", function keyUp(e) {
el.removeEventListener("keyup", keyUp, false) // Memory clean-up
// Your code here
}, false)
}, false)
Furthermore
After a quick search for "UIKeyInput" I discovered that UIKeyInput is "a set of methods a subclass of UIResponder uses to implement simple text entry". (Apple's Developer Documentation) This would explain the special syntax of these key names.
This is a workaround for the enter key in the keyup event.
if (event.type === 'keyup') {
//this is to handle the enter button on an ipad bluetooth keyboard
if (event.key === 'Enter') {
event.which = event.keyCode = 13;
}
}
I have a project where the arrow keys can be used as a method of input, in most browsers simply using .preventDefault() works perfectly, however Firefox (v37 on both Win8 and OSX) still seems to move the browser window (If there's available off screen scroll-able area)
$(document).keyup(function (evt) {
if (evt.keyCode == 39 || evt.keyCode == 40) { // Right arrow, Down arrow
evt.preventDefault();
// Actual code
} else {
if (evt.keyCode == 37 || evt.keyCode == 38) { // Left arrow, Up arrow
evt.preventDefault();
// Actual code
}
}
})
I've seen some things about using charCode, however my code does run so the .preventDefault() is defiantly being hit.
As far as I can tell, there's no reason this should move the window position.
Am I doing something wrong? Or if not, is there another way to disable the window moving due to arrow keys?
You have to listen keydown event instead of keyup cause the former is always happened prior to the latter. This mean that browser may respond to keydown event before keyup event is happened. In this case you cannot cancel browser's response action (i.e. scrolling) from keyup listener anymore.
So I've got this javascript:
<script type="text/javascript">
function OnKeyPress() {
var charCode = window.event.keyCode;
if (charCode == 13) {
window.event.keyCode = 9;
}
} document.onkeypress = OnKeyPress;
</script>
The idea is to catch an enter key press, and switch it to tab key press. And it half works - it catches the enter key. But it doesn't make it register as a tab key. I've tried using other keycodes as well (18 for alt) to confirm I wasn't just not seeing the tab happen.
Can anyone see what the problem is? Working in ASP.NET fwiw.
Thanks!
You can't change the keyCode and have it trigger that event instead. It's just a captured value at that point. You might be able to obtain the effect by calling a function that simulates the desired key press event and canceling the current event instead.
You'll have to create the event handler for it.
Take a look:
How to trigger event in JavaScript?
I am trying to stop the enter key from triggering all actions from other scripts on input fields.
Here is the code I am using:
$(document).bind("keydown", function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
// alert('enter pressed');
e.preventDefault();
return false;
}
});
An example of the code in action is here http://jsfiddle.net/8SJYn/ ,
It should be disabling enter but it is not.
Opinions?
You can do it by turning off the keydown and blur events for the input created by the tagit for this element alone.
Try this:
$('#myTags + ul .ui-autocomplete-input').off('keydown').off('blur');
http://jsfiddle.net/JzJRY/
Go into tag-it.js, and on line 245, find this part and remove it:
event.which === $.ui.keyCode.ENTER
JavaScript events have a "bubbling" phase, where they fire first on the inner-most DOM element, and then work their way up to the top-level document. If you try to stop the event at the document level, as in your example code, it is too late.
In some browsers (Firefox, for one) there is a "capturing" phase that occurs before the bubbling phase, and it works in the opposite direction: from top down. You cannot add a capturing phase event handler using jQuery. You must use the native addEventListener function and pass true as the third parameter. If you add the code below into your jsfiddle, it will prevent the Enter keydown event in some browsers.
document.addEventListener('keydown', function (e) {
if (e.keyCode === 13) {
// alert('Enter keydown');
e.stopPropagation();
}
}, true);
Be aware that the tag-it control in your jsfiddle also performs its text-to-tag conversions on blur, so if you uncomment the alert statement above, it will perform its text-to-tag conversion anyway, because of the blur event that occurs when the alert message is displayed.
Lastly, if you want to prevent not just other scripts from processing the Enter keydown, but also the browser itself, add an e.preventDefault(); line to the above.
I want to catch the event with javascript or jquery when user presses to the delete button in keyboard. Is this possible?
I'm not sure why you're being told that this is impossible?
The delete key is 46, so this should work:
$('html').keyup(function(e){
if(e.keyCode == 46){
//delete key has been pressed.
}
})
Also note: You should be using either the keyup or keydown event rather than keypress. keypress is intended for real character. 'keyup'/'keydown' is handled at a lower level so it will capture all non-printing keys like DEL and ENTER.
Source is here: Capturing "Delete" Keypress with jQuery
$('html').keyup(function(e){
if(e.keyCode == 46)alert('Delete Key Pressed')
})
from here