Working with multiple key press events (windows key) - javascript

While working with the multiple keypress events i found this code which worke fine
$(document).bind('keypress', function(event) {
if( event.which === 65 && event.shiftKey ) {
alert('you pressed SHIFT+A');
}
});
But to make it to work wth combinig with windows key... like
event.which === 65 && event.windowsKey
it failed...
Is there any option to make it work with windows key?
if it is a mac machine there is no key as windows..so what could be the alternate option for windows key in mac

Use keyup event.
On a Mac left Command is which = 91, right Command is which = 93. I can't tell what are those on Windows, but you can test it yourself. As #ian commented they should be 91 and 92 respectively.
To test
$(document).on('keyup', function(e) {
var modKey = "";
if (e.shiftKey) modKey += "shiftKey,";
if (e.ctrlKey) modKey += "ctrlKey,";
if (e.altKey) modKey += "altKey,";
if (e.metaKey) modKey += "metaKey,";
console.log ("which: " + e.which + " modkey: " + modKey );
});
UPDATE: Try use keydown event and event.metaKey
$(document).on('keydown', function(e) {
if(e.which === 65 && event.metaKey ) {
console.log ("You pressed Windows + A");
}
});

Remember the key you pressed before. Like if you press shift. get a boolean or something to shiftPressed = true on a onKeyRelease make it false again. That way you can check if shiftPressed == true && aPressed == true before doing something
I made something a while ago for a little WASD game. Perhaps it makes more sense if you see the code:
var up = false;
var down = false;
var left = false;
var right = false;
function keyUp(e) {
keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode == 37 || keyCode == 65) {
left = false;
}
if (keyCode == 38 || keyCode == 87) {
up = false;
}
if (keyCode == 39 || keyCode == 68) {
right = false;
}
if (keyCode == 40 || keyCode == 83) {
down = false;
}
}
function forceStopMoving() {
left = false;
up = false;
right = false;
down = false;
}
function keyDown(e) {
keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode == 37 || keyCode == 65) {
left = true;
}
if (keyCode == 38 || keyCode == 87) {
up = true;
}
if (keyCode == 39 || keyCode == 68) {
right = true;
}
if (keyCode == 40 || keyCode == 83) {
down = true;
}
}

Related

p5.js: how can I limit keyPressed to sending just 1 output?

I'm trying to prevent players from pressing both left and right keys at the same time, since doing so will change both "isLeft" and "isRight" to true. I've tried the code below but it makes the controls really stiff, for example, if you were to let go of "D" too late before pushing "A", it will register "D" being released but would not register "A" being pressed (since A is pressed when "isRight" is true. Sorry if this analogy is too confusing...
I'm looking for a way to take input from pressing "A", and if "D" is still pressed after "A" is released, immediately take input from "D".
Thanks in advance!
function keyPressed()
{
if ((key == 'A' || keyCode == 37) && !isRight)
{
isLeft = true;
}
else if ((key == 'D' || keyCode == 39) && !isLeft)
{
isRight = true;
}
}
A solution to interpret left vs right when both keys are pressed is to listen for keyPressed and keyReleased. On keyReleased we can also check and see if the alternate key is already down. This approach allows the code to immeditally switch to the other key when both are down and one is released
var isLeft = false;
var isRight = false;
function setup(){
frameRate(10);
}
function keyPressed(){
if ((key == 'A' || keyCode == 37) && !isRight){
isLeft = true;
} else if ((key == 'D' || keyCode == 39) && !isLeft) {
isRight = true;
}
}
function keyReleased(){
if ((key == 'A' || keyCode == 37)){
isLeft = false;
if ((keyIsDown(16) && keyIsDown(68)) || keyIsDown(39)){
isRight = true;
}
}
else if ((key == 'D' || keyCode == 39)){
isRight = false;
if ((keyIsDown(16) && keyIsDown(65))|| keyIsDown(37)){
isLeft = true;
}
}
}
function draw(){
console.log( " isLeft: "+isLeft + " isRight: " + isRight);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
The keyIsDown detects if a key is being pressed. I'm not sure if it works for all characters, but it works for the arrow keys. If you add !keyIsDown(RIGHT_ARROW), then it sees if the Right arrow is down. If it's down, then the if isn't true, if it's false the if is true it's being run.
Tell me if this doesn't work.
function keyPressed()
{
if ((key == 'A' || keyCode == 37) && !isRight&&!keyIsDown(RIGHT_ARROW))
{
isLeft = true;
}
else if ((key == 'D' || keyCode == 39) && !isLeft!keyIsDown(LEFT_ARROW))
{
isRight = true;
}
}

how to prevent "shift+greater than" being typed in Javascript

I have a requirement where I have to prevent user from typing in shift+greater than in textbox.
I looked up in the ascii key code chart.I could see no ascii key for shift+greater than combination which renders ">" on the UI.
This is the code that i have tried so far.
$scope.isValidControlInputInteger = function (event) {
var keyCode = event.keyCode;
if (keyCode >= 48 && keyCode <= 57 && event.shiftKey) { // decimal numbers
return true;
} else if (keyCode >= 96 && keyCode <= 105) { // numerical pad
return true;
} else if (keyCode == 46 || keyCode == 8) { // delete and backspace
return true;
} else if (keyCode == 37 || keyCode == 39) { // arrow keys
return true;
}
else if (keyCode == 9) { // tab key
return true;
}
else {
return false;
}
};
A simple workaround that works better than checking for keyup is to just remove all instances of > upon changing the contents of the input field.
$("#field").on("keyup", function(e) {
$(this).val($(this).val().replace(/\>/g, ""))
});
Here's a fiddle.

how can i use capslock function on a virtual keyboard using javascript if the textarea that handles the string value is readOnly?

i have used this code but it only detects if the capslock is on or off.
$(function () {
var isShiftPressed = false;
var isCapsOn = null;
$("#txtName").bind("keydown", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 16) {
isShiftPressed = true;
}
});
$("#txtName").bind("keyup", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 16) {
isShiftPressed = false;
}
if (keyCode == 20) {
if (isCapsOn == true) {
isCapsOn = false;
$("#error").hide();
} else if (isCapsOn == false) {
isCapsOn = true;
$("#error").show();
}
}
});
$("#txtName").bind("keypress", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
$("#error").show();
} else {
$("#error").hide();
}
});
});
but this is not functioning if the textarea that hold the value is in readOnly state.
how can i fix it?
replace
$("#txtName")
with
$('body')
You could use onkeypress instead of onkeydown. The latter only detects which key was pressed; the former (even though counter-intuitively its name includes 'keypress') will give you the char. This link explains in detail: http://unixpapa.com/js/key.html Note that onkeypress is not supported by all browsers.
Also, your code for converting charcode to char is inefficient, and you're converting uppercase charcodes to lowercase chars. Here's some code that listens for key presses and on each one, alerts the user which char was pressed.
document.onkeypress = function(event){
event = event || window.event;
var key = event.keyCode;
alert(String.fromCharCode(key));
}
if (event.keyCode == "65"){
document.getElementById("txtInput").value+=val1;
btnA.style.backgroundColor="#00bfff";
}
if (event.keyCode == "66"){
document.getElementById("txtInput").value+="b";
btnB.style.backgroundColor="#00bfff";
}
if (event.keyCode == "67"){
document.getElementById("txtInput").value+="c";
btnC.style.backgroundColor="#00bfff";
}
if (event.keyCode == "68"){
document.getElementById("txtInput").value+="d";
btnD.style.backgroundColor="#00bfff";
}
if (event.keyCode == "69"){
document.getElementById("txtInput").value+="e";
btnE.style.backgroundColor="#00bfff";
}
if (event.keyCode == "70"){
document.getElementById("txtInput").value+="f";
btnF.style.backgroundColor="#00bfff";
}
if (event.keyCode == "71"){
document.getElementById("txtInput").value+="g";
btnG.style.backgroundColor="#00bfff";
}
if (event.keyCode == "72"){
document.getElementById("txtInput").value+="h";
btnH.style.backgroundColor="#00bfff";
}
if (event.keyCode == "73"){
document.getElementById("txtInput").value+="i";
btnI.style.backgroundColor="#00bfff";
}
if (event.keyCode == "74"){
document.getElementById("txtInput").value+="j";
btnJ.style.backgroundColor="#00bfff";
}
if (event.keyCode == "75"){
document.getElementById("txtInput").value+="k";
btnK.style.backgroundColor="#00bfff";
}
if (event.keyCode == "76"){
document.getElementById("txtInput").value+="l";
btnL.style.backgroundColor="#00bfff";
}
if (event.keyCode == "77"){
document.getElementById("txtInput").value+="m";
btnM.style.backgroundColor="#00bfff";
}
if (event.keyCode == "78"){
document.getElementById("txtInput").value+="n";
btnN.style.backgroundColor="#00bfff";
}
if (event.keyCode == "79"){
document.getElementById("txtInput").value+="o";
btnO.style.backgroundColor="#00bfff";
}
if (event.keyCode == "80"){
document.getElementById("txtInput").value+="p";
btnP.style.backgroundColor="#00bfff";
}
if (event.keyCode == "81"){
document.getElementById("txtInput").value+="q";
btnQ.style.backgroundColor="#00bfff";
}
if (event.keyCode == "82"){
document.getElementById("txtInput").value+="r";
btnR.style.backgroundColor="#00bfff";
}
if (event.keyCode == "83"){
document.getElementById("txtInput").value+="s";
btnS.style.backgroundColor="#00bfff";
}
if (event.keyCode == "84"){
document.getElementById("txtInput").value+="t";
btnT.style.backgroundColor="#00bfff";
}
if (event.keyCode == "85"){
document.getElementById("txtInput").value+="u";
btnU.style.backgroundColor="#00bfff";
}
if (event.keyCode == "86"){
document.getElementById("txtInput").value+="v";
btnV.style.backgroundColor="#00bfff";
}
if (event.keyCode == "87"){
document.getElementById("txtInput").value+="w";
btnW.style.backgroundColor="#00bfff";
}
if (event.keyCode == "88"){
document.getElementById("txtInput").value+="x";
btnX.style.backgroundColor="#00bfff";
}
if (event.keyCode == "89"){
document.getElementById("txtInput").value+="y";
btnY.style.backgroundColor="#00bfff";
}
if (event.keyCode == "90"){
document.getElementById("txtInput").value+="z";
btnZ.style.backgroundColor="#00bfff";
}
thats the code i used so when i press a-z in the keyboard it will have a-z in the textarea. But even if the capslock is ON its still on lowercase.

Disable Ctrl key in IE 8

I want to disable the ctrl key in the IE browser.I had tried some solution using javascript but nothing is working can someone please help me to find out the solution
document.onkeydown = function () {
if (event.keyCode == 17) alert('Ctrl Key is disabled');
};
document.onkeydown = function(e) {
if (e.altKey && (e.keyCode === 36)) {//Alt+home blocked.
return false;
}
if (e.altKey && (e.keyCode === 70)) {//Alt+f blocked.
return false;
}
};
function hookKeyboardEvents(e) {
// get key code
var key_code = (window.event) ? event.keyCode : e.which;
// case :if it is IE event
if (window.event)
{
if (!event.shiftKey && !event.ctrlKey) {
window.event.returnValue = null;
event.keyCode = 0;
}
}
// case: if it is firefox event
else
e.preventDefault();
}
window.document.onkeydown = hookKeyboardEvents;
function Disable_Control_C() {
var keystroke = String.fromCharCode(event.keyCode).toLowerCase();
if (event.ctrlKey && (keystroke == 'c' || keystroke == 'v' || keystroke == 'p' || keystroke == 's' || keystroke == 'u')) {
alert("this function is disabled");
event.returnValue = false; // disable Ctrl+C
}
}
<body onkeydown="javascript:Disable_Control_C()">
this is what i do it to run in the IE...

Firefox keydown backspace issue

I'm building a terminal emulation and running into an issue with capturing backspace in Firefox. I'm able to nab the first backspace and remove the last character on the input at the prompt, but it won't persist and remove more than one character.
Actual website: http://term.qt.io/
Replication here: http://jsfiddle.net/BgtsE/1/
JavaScript code
function handleKeys(e){
var evt = e || window.event;
var key = evt.charCode || evt.keyCode;
if(evt.type == "keydown")
{
curr_key = key;
if(key == 8)
{
evt.preventDefault();
if(0 < $('body').text().length)
$('body').text($('body').text().slice(0,-1));
}
}
else if(evt.type == "keypress")
{
if(97 <= key && key <= 122)
{
if(curr_key != key)
$('body').append(String.fromCharCode(key));
}
else
$('body').append(String.fromCharCode(key));
}
}
$(function(){
$('html').live({
keydown:function(e){
handleKeys(e);
},
keypress:function(e){
handleKeys(e);
}
})
})​
Try this: http://jsfiddle.net/NBZG8/1/
You'll need to handle backspace in both keydown and keypress to support Chrome and Firefox
function handleKeys(e){
var evt = e || window.event;
var key = evt.charCode || evt.keyCode;
if (evt.type == "keydown") {
curr_key = key;
if(key == 8 && !$.browser.mozilla) {
backspaceHandler(evt);
}
} else if (evt.type == "keypress") {
if (key == 8) {
backspaceHandler(evt);
} else if (97 <= key && key <= 122) {
if(curr_key != key) {
$('body').append(String.fromCharCode(key));
}
} else {
$('body').append(String.fromCharCode(key));
}
}
}
function backspaceHandler(evt) {
evt.preventDefault();
if(0 < $('body').text().length) {
$('body').text($('body').text().slice(0,-1));
}
};
$(function(){
$('html').live({
keydown : handleKeys,
keypress : handleKeys
})
})​
In firefox Windows 17.0.1 any value returned by $("selector").text() has an added new line character appended to the end. So the substring didn't work for me:
<html>
<head>
<title>test</title>
<script src="jquery.js"></script>
<script>
$("document").ready(function(){
console.log("body text seems to have a new line character");
console.log(($('body').text()[5]=="\n"));
});
function handleKeys(e){
var evt = e || window.event;
var key = evt.charCode || evt.keyCode;
if(evt.type == "keydown")
{
curr_key = key;
if(key == 8)
{
evt.preventDefault();
if(0 < $('body').text().length)
// next line works, you might trim the \n if it's there at the end
//$('body').text($('body').text().slice(0,-2));
// this one didn't work for me
$('body').text($('body').text().substring(0,$('body').text().length-1));
}
}
else if(evt.type == "keypress")
{
if(97 <= key && key <= 122)
{
if(curr_key != key)
$('body').append(String.fromCharCode(key));
}
else
$('body').append(String.fromCharCode(key));
}
}
$(function(){
$('html').live({
keydown:function(e){
handleKeys(e);
},
keypress:function(e){
handleKeys(e);
}
})
})
</script>
</head>
<body>12345</body>
</html>
I had the same issue with keypress on mozilla.
Thanks to this subject it solves my problem so I'll post my code if anyone try to do the same thing as me.
In my exemple I try to auto space when the user type two numbers, and it didn't work in Firefox so that's my code :
$(function() {
$('#field1, #field2').on('keypress',function(event) {
event = event || window.event;
var charCode = event.keyCode || event.which,
lgstring = $(this).val().length,
trimstring;
if(charCode === 8) {
event.returnValue = false;
if(event.preventDefault)
event.preventDefault();
if(0 < $(this).val().length) {
$(this).val($(this).val().slice(0,-1));
}
}
else if(((charCode > 31) && (charCode < 48 || charCode > 57)) || lgstring >= 14) {
event.returnValue = false;
if(event.preventDefault)
event.preventDefault();
}
else {
trimstring = $(this).val().replace(/ /g,"");
if((lgstring !== 0) && (trimstring.length % 2) === 0 ) {
$(this).val($(this).val() + ' ');
}
}
});
});
I noticed that Mozilla handle the backspace as a keypress where Chrome don't.
Sorry for my English I'm French
$('#id').keypress(function(e) {
if(e.charCode > 0 || e.keyCode === 8){
if(e.keyCode === 8){
return true;
}else if((e.charCode !== 0) && ((e.charCode > 57 && e.charCode < 65)){
return false;
}
}else if((e.keyCode !== 0) && ((e.keyCode > 57 && e.keyCode < 65)){
return false;
}
});

Categories