How to catch global keyPress events in Ember - keyboard

I'm sure I'm missing something obvious, but: How do I respond to a keypress event anywhere on the page?
For example, say I had a video player and I wanted to pause it if a user pressed the spacebar at any point. Or, I'm writing a game and want the arrow keys to direct a character, without regard for specific views or subviews.
Defining App.ApplicationView = Ember.View.create({ keyPress: whatever }) doesn't seem to work. I would have thought that all keypress events would bubble up to that.
I guess what I want to do is:
$(document).keypress(function(e) {
alert('You pressed a key!');
});
Except through Ember.

If you are looking for a global keypress your code example above is probably the best solution. The ember application is attached to the body (or a root element you've defined) and would require some sort of focus on the view. For example you could do:
App.ApplicationView = Em.View.extend({
keyUp: function(){
alert(1);
}
});
This will work, but the application view or a child will need to have focus. This is useful, for example, if you wanted to capture a key event of all input fields.

Related

How to get the hand/controller that pressed a button

I would like to know, just by subscribing to the Interactable OnClick event, if I pressed the button with my left or right hand. Would that even be possible without passing this information along with the OnClick event?
The button has quite the logic to go through until it decides to accept a click request, so replicating all of that via global listener is not feasible.
Is it possible to get that information OnClick from somewhere else? Is it possible to query the potential click sources for who that was?
Without altering the Interactable class the only way I found was to query the FocusProvider for the active pointer, which must have been the one pressing the button (in my case):
https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/Input/Pointers.html
https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/Input/Controllers.html
Setup your controllers, take note of the axis name, in code you can do something like this in any GameObject's update loop:
if (Input.GetAxis("Axis1D.PrimaryHandButton") > 0.5f) {
// this axis (button) is pressed do something
}

Primefaces hotkey while input has focus

I’m developing web app using Primefaces and one of the requirements is that hotkeys should work. And they do but there is a catch. While reading documentation I found out that hotkeys hotkey will not be triggered if there is a focused input on page. And this is big show stopper for us. Is there a way to make at least some hotkeys like F1, F2, ESC etc. work?
One way to achieve that is to manually bind the hotkeys to the inputs you choose.
I don't know your personal needs, but the following code (in jQuery) will bind it to all input, textarea, select and button elements.
$(':input').keydown(function (event) {
if (event.which == 112) { //you could also make a switch :)
alert('f1 pressed!'); //do what you want
}
if (event.which == 113) {
alert('f2 pressed!'); //do what you want
}
//...
})
Also don't delete your p:hotkeyto continue with its normal behavior.
Note: Search for javascript keycode if you want to know more codes.

Onkeypress canceling event javascript

I have a textbox that I would like to prevent the user from entering any letters in. They need to be able to enter numbers.
The textbox has an onkeypressed event already set, and I'm adding logic so that if the user enters a letter, nothing is shown.
Regardless of what I do (cancelbubble, stop propogation, return false), the letter is still getting entered in the text box. I've watched the debugger go over these and still the letter is being entered, its like it is taking place after the fact of the event.
The event handler hook you are looking for is onkeydown:
yourInput.onkeydown = function(e){
var char = String.fromCharCode(e.which); // get the char
return /[0-9]/.test(char); //assert it's a number
}
working demo
Returning false from an event handler attached directly (rather than attachEvent) cancels the event.
Actually once I got home to test onkeydown was doing the same thing, when I edited what was in the text box, it would still add the non-numeric character at the end.
Ended up using onkeyup, that appears to be far enough down the line that it will wipe out what is in the textbox.
I was really looking for the ajax filtered textbox functionality, but couldn't use that because we aren't using actual ajax controls in the application.

Chrome Extension - first link is auto-focused in popup

How do I stop my Google Chrome extension's default action to auto-focus the first link in my popup.html? I know I could probably do some roundabout hack with JS or change the :focus CSS, but I think this is throwing off something else I'm trying to do and I'd prefer to stop the root cause of it.
The easiest (and javascript free!) way is to simply add tabindex="-1" to any element which you don't want to receive automatic focus.
Perhaps auto-focus was intended for a convenience, but often it does a disservice. Since I see no way to stop the root cause, I found some roundabouts. One is using JavaScript. Chrome puts auto-focus after a short delay after displaying the popup. It's possible to unfocus it with blur() but unfocusing it too late will flash it momentarily, and trying to unfocus too early will do nothing. So to find the right time to unfocus is not easy, and this solution tries to do this several times during the first second after the popup is displayed:
document.addEventListener("DOMContentLoaded", function () {
var blurTimerId = window.setInterval(function() {
if (document.activeElement != document.body) {
document.activeElement.blur();
}
}, 200);
window.setTimeout(function() {
window.clearInterval(blurTimerId);
}, 1000);
});
Another pure HTML solution is to add tabindex="1" to the body tag.
Wrangling the initially focused element with a tabindex attribute is probably the best way to go, using:
tabindex="-1", as suggested by Paul Ferret to prevent an element from getting focus
tabindex="1", as suggested by link0ff, to specify which element should start with focus
If your situation is more complicated and you do want to bring in some javascript, I'd recommend using link0ff's solution, except, instead of trying to guess when to blur with timeouts, listen for the initial focus in event:
function onInitialFocus(event) {
// Any custom behavior your want to perform when the initial element is focused.
// For example: If this is an anchor tag, remove focus
if (event.target.tagName == "A") {
event.target.blur();
}
// ALSO, remove this event listener after it is triggered,
// so it's not applied to subsequent focus events
document.removeEventListener("focusin", onInitialFocus);
}
// NOTE: the "focusin" event bubbles up to the document,
// but the "focus" event does not.
document.addEventListener("focusin", onInitialFocus);
I don't believe the focus event is cancelable, so you can't just suppress the event.
Another easy alternative (which preserves "tabbability") is to just add an empty link () before your first actual link. It will invisibly "catch" the auto-focus from Chrome, but any users who want to tab through the links will still be able to do so normally.
The only minor downside of this approach is that it introduces a second "dead tab" when looping; that is, users will have to press tab three times to get from the last link back to the first, instead of just twice.
tabindex="-1" worked for me. I was adding autofocus to an input and it didn't work until I used this tabindex="-1" attribute for each link before the input.
Strange to say the least.
This is the best solution to the problem. The tabindex="-1" solution harms user experience, and as opposed to #link0ff's solution, this one removes the focus instantly.
This element should be the first focusable element in the DOM:
<button class="invisible-button"></button>
This simply removes the button once it's been focused:
function removeAutoFocus(e) {
if (e.target.classList.contains("invisible-button")) {
e.target.style.display = "none";
document.removeEventListener("focus", removeAutoFocus);
}
}
document.addEventListener("focus", removeAutoFocus, true);

using BeginReceivingRemoteControlEvents in Monotouch

I've made my app play music in the background, I also successfully made it become the media player by calling BeginReceivingRemoteControlEvents. however, the RemoteControlReceived method never gets called. the same logic in Objective C is working fine. Any samples or guidelines appreciated.
You need to ensure it is placed on the First responder view, and if not, the event needs to be passed up along the chain of responders until it reaches your remote events. Try to imagine remote control events the same as keypresses on the keyboard. For example, If the app is focused on a button, and you press some keyboard keys, nothing will happen, as a button isn't listening for key presses.
A similar situation is occurring in your code. Try to create a basic, single viewed project with the BeginReceivingRemoteControlEvents and the method override to receive the event (cant remember what it is, RemoteEventReceived() or something similar.) This should get fired when you press a remote button.
(sorry I cant give sample code, not in front of mac at the minute)
You might want to try using a later mechanism to listen for remote control events. For example, if you want to listen to the headset button:
MPRemoteCommandCenter *commandCenter = [MPRemoteCommandCenter sharedCommandCenter];
[commandCenter.togglePlayPauseCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
NSLog(#"toggle button pressed");
return MPRemoteCommandHandlerStatusSuccess;
}];
or, if you prefer to use a method instead of a block:
[commandCenter.togglePlayPauseCommand addTarget:self action:#selector(toggleButtonAction)];
To stop:
[commandCenter.togglePlayPauseCommand removeTarget:self];
or:
[commandCenter.togglePlayPauseCommand removeTarget:self action:#selector(toggleButtonAction)];
You'll need to add this to the includes area of your file:
#import MediaPlayer;
This works in the background, ONLY if you are an audio app playing in the background (i.e. you have to set that background mode in your app capabilities).

Resources