The Internet Browser - Extended Functionality page for the Wii-U browser indicates that the A button and the control pad should send key events to the browser. Using the sample code below I was able to receive events for the A button but the directional pad seems to just want to scroll around the page and no events are triggered.
How can I properly receive notification of these events?
<script>
document.body.onkeypress = function (event) {
var pad = ["LEFT", "UP", "RIGHT", "DOWN"];
var div = document.getElementById("text");
// handle the A button
if (event.keyCode == 13) {
div.innerText = "A";
}
// handle the control pad - this doesn't seem to work
if (event.keyCode >= 37 && event.keyCode <= 40) {
div.innerText = pad[event.keyCode - 37];
}
};
</script>
I would rather avoid polling the window.wiiu.gamepad object as I only need the input that should be provided through the Control Pad and A button key events.
Turns out the A button can be captured by any of the the keydown, keyup or keypress events but the eight way digital pad can only be captured through the keydown and keyup events. You can also cancel the event to prevent the normal browser handling of moving between links on a page with preventDefault().
Sample code:
document.body.onkeyup = function (event) {
var pad = ["LEFT", "UP", "RIGHT", "DOWN"];
var div = document.getElementById("text");
// handle the A button
if (event.keyCode == 13) {
div.innerText = "A - KEYUP";
}
// handle the control pad
if (event.keyCode >= 37 && event.keyCode <= 40) {
div.innerText = pad[event.keyCode - 37] + " - KEYUP";
}
// prevent the Wii U browser from processing the event further
event.preventDefault();
return false;
};
document.body.onkeydown = function (event) {
var pad = ["LEFT", "UP", "RIGHT", "DOWN"];
var div = document.getElementById("text");
// handle the A button
if (event.keyCode == 13) {
div.innerText = "A - KEYDOWN";
}
// handle the control pad
if (event.keyCode >= 37 && event.keyCode <= 40) {
div.innerText = pad[event.keyCode - 37] + " - KEYDOWN";
}
// prevent the Wii U browser from processing the event further
event.preventDefault();
return false;
};
document.body.onkeypress = function (event) {
var div = document.getElementById("text");
// handle the A button
if (event.keyCode == 13) {
div.innerText = "A";
}
};
Related
I have used a function which is activated on click events. I want to do the same using keypress events.
function addToText(target) {
var exp = target.target;
//alert(exp.value);
if (newExp) {
//clearText();
document.getElementById("expression").value = exp.value;
newExp=false;
}
else
document.getElementById("expression").value = document.getElementById("expression").value + exp.value;
}
This is the function used. How do I modify it to use for keypress events also. Currently, it does not work initially(for keypress events). But after clicking once, then any keypress returns the same number that was previously clicked.
Full code here:http://codepen.io/jpninanjohn/pen/JXVpYb?editors=1010
Here's is your final solution, I test if charcode is between 48 and 57, what it means, numbers between 0 and 9.
document.addEventListener('keypress', function(e){
if (e.which >= 48 && e.which <= 57)
document.getElementById("expression").value+= String.fromCharCode(e.which);
});
You can use this function-
window.onkeyup = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
document.getElementById("expression").value += key-48; //for getting the number
alert(key);
if (key == 38) {
//whatever
}else if (key == 40) {
// whatever
}
}
source
And you need to add + to the =
document.getElementById("expression").value+=
instead of -
document.getElementById("expression").value=
You have to add a different function for keyPress event, because the keypress event get the value of pressed key differently, not target.target
function addToTextKeypress(event) {
var exp = String.fromCharCode(event.keyCode);
//alert(exp);
if (newExp) {
//clearText();
document.getElementById("expression").value = exp;
newExp=false;
}
else
document.getElementById("expression").value = document.getElementById("expression").value + exp;
}
Later you need to remove exp.value since it has the direct value
I'm practicing moving around objects when a user presses an arrow key. I've got it so when they press right it moved an object to the right and when they press up it moves it up. However, my function is only able to record 1 of these keypresses at once, so they can't move diagonally:
document.onkeydown = function(e){
if (e.which == 39){ // Move Right
var position = $("#ball1").position();
$("#ball1").offset({left:position.left+2});
}
if (e.which == 38){ // Move Up
var position = $("#ball1").position();
$("#ball1").offset({top:position.top-2});
}
};
Is there a way to respond to both key presses at the same time?
You have to detect both keydown and keyup
var key = {};
document.onkeydown = function(e){
if (e.which == 39 || e.which == 38){ // Move Right
key[e.which] = true;
if (key[39]) {
var position = $("#ball1").position();
$("#ball1").offset({left:position.left+2});
}
if (key[38]) {
var position = $("#ball1").position();
$("#ball1").offset({top:position.top-2});
}
}
};
document.onkeyup = function(e){
if (key[e.which])
delete key[e.which];
};
The title says most of it. I'd like a javascript/html solution for how to make persistent, user-configurable keyboard shortcut listeners (plus any nice thoughts on how to actually persist the preferences if you have 'em).
It seems both straightforward and slightly tricky at the same time :)
Thanks!
If you want to allow the user get shortcuts like "Control"+(...), you just have to capture the keys pressed, so check if "Control" is pressed with such keys pressed to do an action.
This is an simple and bad example of doing this:
var Pressed={
CTRL:false,
Spacebar:false
},Keyboard={ // an object containing Keyboard keys code
CTRL:17,
Spacebar:32
};
window.onkeydown=function(e){ // user started pressing an key (event)
var Key=(e.keyCode||e.which||e.key); // capture key pressed from event
if(Key==Keyboard.CTRL){ // CTRL is pressed
Pressed.CTRL=true
Pressed.Spacebar=false // CTRL has to be pressed before than Spacebar
}else if(Key==Keyboard.Spacebar){ // Spacebar is pressed
Pressed.Spacebar=true
}
if(Pressed.CTRL&&Pressed.Spacebar){ // Case CTRL+Spacebar are pressed
e.preventDefault(); // prevent Opera from quitting from the page
console.log("CTRL+Spacebar were pressed.")
}
},
window.onkeyup=function(e){ // event when an key is released
var Key=(e.keyCode||e.which||e.key); // capture key released from event
if(Key==Keyboard.CTRL){ // CTRL is released
Pressed.CTRL=false
}else if(Key==Keyboard.Spacebar){ // Spacebar is released
Pressed.Spacebar=false
}
};
To update...
You can try something like this:
For demo purpose, I have just logged if Alt, Ctrl or Shift + 'Key' and if key is defined in shortcuts, then print Special action else 'Normal action'. Also I have disabled propagation of key events for inputs, but this section can be removed if not required.
JSFiddle
Code
(function keyLogger() {
var isCtrlPressed = false;
var isAltPressed = false;
var isShiftPressed = false;
var shortcutKeys = [
13, // Enter
32, // Space
37, // Left Arrow
38, // Up Arrow
39, // Right Arrow
40, // Down Arrow
90, // z
]
function registerEvents() {
document.onkeydown = function(event) {
var keyCode = event.keyCode ? event.keyCode : event.which;
if (keyCode >= 16 && keyCode <= 18) {
updateKeyFlags(keyCode, true);
}
if (isCtrlPressed || isAltPressed || isShiftPressed) {
if (shortcutKeys.indexOf(keyCode) >= 0) {
console.log("Special action");
} else {
console.log("Normal action");
}
}
}
document.onkeyup = function(event) {
var keyCode = event.keyCode ? event.keyCode : event.which;
if (keyCode >= 16 && keyCode <= 18) {
updateKeyFlags(keyCode, false);
}
}
// To prevent logging from Inputs.
// Can be removed if this action is required.
var inputs = document.getElementsByTagName("input");
for (var i in inputs) {
inputs[i].onkeyup = function(event) {
event.stopPropagation();
}
inputs[i].onkeydown = function(event) {
event.stopPropagation();
}
}
}
function updateKeyFlags(keyCode, flag) {
switch (keyCode) {
case 16:
isShiftPressed = flag;
break;
case 17:
isCtrlPressed = flag;
break;
case 18:
isAltPressed = flag;
break;
}
}
registerEvents();
})();
<div>
<input type="text">
<input type="text">
</div>
I'm wondering how to record keypresses on a blank html page, like, if A->B->C keys are pressed in a row (after eachother), then display a div or redirect the user. And if the user presses A->B-> but not C, then reset the array so the user has got to type it in again (from the start) in order for the desired action to be triggered.
Just a rough example
var checkArray = [],
error = 'Enter the right combination !!',
success = 'Success !!',
$div = $('#div'),
timer = 1000,
timeout;
$(document).on('keyup', function (e) {
if(timeout) clearTimeout(timeout);
var keyPressed = e.keyCode;
(keyPressed > 64 && keyPressed < 68) ? checkArray.push(keyPressed)
: checkArray = [];
console.log(checkArray.join('-'));
if (checkArray && checkArray.length === 3) {
if (checkArray[0] === 65 && checkArray[1] === 66
&& checkArray[2] === 67) {
$div.text(success).addClass('a');
timer = 2000;
}
} else {
$div.text(error).removeClass('a');
}
timeout = setTimeout(reset, timer);
});
function reset() {
timer =1000;
checkArray = [];
$div.text(error).removeClass('a');
}
Check Fiddle
capture the keydown events and store the results in global variables. put logic in the capture event to do the desired action.
See http://api.jquery.com/keydown/
I've got several editable divs. I want to jump through them by pressing arrow keys (38 and 40).
Firefox 3 on Mac OS and Linux won't repeat the events on holding the key. Obviously only keypress events are supported for repetition. As the keys 38 and 40 are only supported on keydown I'm kind of stuck.
Yes, you're kind of stuck. You could emulate the behaviour you want by using timers until you receive the corresponding keyup, but this obviously won't use the user's computer's keyboard repeat settings.
The following code uses the above method. The code you want to handle keydown events (both real and simulated) should go in handleKeyDown:
var keyDownTimers = {};
var keyIsDown = {};
var firstKeyRepeatDelay = 1000;
var keyRepeatInterval = 100;
function handleKeyDown(keyCode) {
if (keyCode == 38) {
alert("Up");
}
}
function simpleKeyDown(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
handleKeyDown(keyCode);
}
document.onkeydown = function(evt) {
var timer, fireKeyDown;
evt = evt || window.event;
var keyCode = evt.keyCode;
if ( keyIsDown[keyCode] ) {
// Key is already down, so repeating key events are supported by the browser
timer = keyDownTimers[keyCode];
if (timer) {
window.clearTimeout(timer);
}
keyIsDown[keyCode] = true;
handleKeyDown(keyCode);
// No need for the complicated stuff, so remove it
document.onkeydown = simpleKeyDown;
document.onkeyup = null;
} else {
// Key is not down, so set up timer
fireKeyDown = function() {
// Set up next keydown timer
keyDownTimers[keyCode] = window.setTimeout(fireKeyDown, keyRepeatInterval);
handleKeyDown(keyCode);
};
keyDownTimers[keyCode] = window.setTimeout(fireKeyDown, firstKeyRepeatDelay);
keyIsDown[keyCode] = true;
}
};
document.onkeyup = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
var timer = keyDownTimers[keyCode];
if (timer) {
window.clearTimeout(timer);
}
keyIsDown[keyCode] = false;
};
You can use keypress and check the e.keyCode == 38,40 instead of e.which or e.charCode
This is consistent across Mac and Win.
$('#test').bind($.browser.mozilla ? 'keypress' : 'keyup', function(e) {
if ( (e.which || e.keyCode) == 40 ) { /* doSometing() */ }
});
See JavaScript Madness: Keyboard Events (3.2. Values Returned on Character Events)
and event.keyCode on MDC.