I have an input like this
<input id="guestCard" name="guestCard" onkeypress="transform(event)" type="text" value="" />
and I want to transform the key pressed on a keyboard regardless of which language settings to english character. E.g. when I press on czech keyboard + (with keycode 43) , I want to get 1 (with keycode 49).
Is there some standard way to do this? How would the function transform look like?
Alternatively I want the same functionality but using ajax (on asp.net mvc). Any ideas there?
Thanks in advance.
As far as I am aware, JavaScript is not locale aware - so you would need to somehow detect or have the user pick the appropriate transform mapping (in this case, perhaps a radio button for czech as the source and U.S. ASCII as the destination). Once that is taken care of, your function could be something like:
function transform(event) {
var code = (event.charCode) ? event.charCode : event.keyCode; // cross-browser happy
switch (code) {
case 43 : return "1";
}
}
There is a great test page to see how keyCode/charCode properties and the onKeyDown/Press/Up events behave in different browsers. http://asquare.net/javascript/tests/KeyCode.html
I doubt there is one but to create it, create an associative array, add some JS to a text field which saves the two values in the array and then press every key on the keyboard. After that, you can dump the array somewhere and use this as a constant in your code.
But be warned: Almost all users will have problems when they don't get the character on the screen which they've typed on the keyboard.
Trimack -
I think you are using the wrong event. You need onkeydown, and use the keyCode property of event.
Related
In my application, I need to identify if the user pressed any of the number keys (either main keyboard or numpad) as well as if shift/ctrl/alt keys are pressed at the same time.
I need this because the pressed key represents the number in the array (from 0 to 9) which should trigger an action with this number. So my logic is simple:
#HostListener('document:keydown', ['$event'])
handleKeydownEvent(event: KeyboardEvent) {
let index = Number(event.key);
if (isNaN(index)) {
// skip, for now
}else{
doAction(index);
}
}
I like this because of its readability and transparency.
It seems that things are simple when I additionally need to handle 'Alt' or 'Ctrl'. In these cases, event.key still represents a numeric key value of the key pressed (like '1' or '2') (and I can check event.ctrlKey/event.altKey.
But things are getting more complicated when I need to consider the 'Shift' key. In this case, event.key does not represent a numeric key. Instead, it represents other characters such as '!' or '#'.
I guess I could convert this into key code by building a map, but I'd need to handle keyboard layouts as in some cases Shift+2 will end up to be a '#', in other - '"' (Russian layout vs English).
What is the proper and simple way to detect the code of the key pressed when the 'Shift' button is pressed?
Thanks!
Options:
Uisng event.which: It returns numeric value but it is deprecated.
Your idea of creating map is cool. To create the map, instead of using "event.key", use "event.code".
EVENT.CODE is your life saver.
I'm just wondering what the preferred way to preform a ctrl + click action in leadfoot is. In java I would have used the Actions class and used keyDown, but since we have moved to a JS based framework I'm a complete fish out of water!
I've seen in the api that there is a pressKeys function but it doesn't seem to do what we need. I've thought about using jQuery to do this but I would really rather keep it in the current framework.
Any help greatly appreciated.
Peter
You can use pressKeys, for example:
command.moveMouseTo(myBtn)
.pressKeys(keys.CONTROL)
.clickMouseButton()
.pressKeys(keys.CONTROL)
A good thing to remember about pressKeys (https://theintern.github.io/leadfoot/Command.html#pressKeys)
keys: The text to type in the remote environment. It is possible to type keys that do not have normal character representations (modifier keys, function keys, etc.) as well as keys that have two different representations on a typical US-ASCII keyboard (numpad keys); use the values from leadfoot/keys to type these special characters. Any modifier keys that are activated by this call will persist until they are deactivated. To deactivate a modifier key, type the same modifier key a second time, or send \uE000 ('NULL') to deactivate all currently active modifier keys.
TheIntern/LeadFoot provides you a function execute. You can trigger any event from this function using JS.
.execute(function() {
//You can even access window from here
$("#someId").click() //example
//or try something like this
e = jQuery.Event("keydown");
e.which = 50;
e.ctrlKey = true;
$("input").trigger(e);
})
To trigger keyevent follow these links:
jquery trigger ctrl + click
How to trigger key combo with jQuery
When I switch my keyboard layout to hebrew and press a character, it is received in the kepress event as is. For example, clicking ה (the v key), then e.which is 1492. However, when I do a combination the key is the english key. So for alt+ה e.which is 86. So the event looks like alt+v
This is a pain if I want to create a function that accepts key combinations and callbacks and registers the callbacks but also shows a documentation of the callbacks, since if I register alt+ה, then when I press the combination it will look like alt+v and it wouldn't match the registered combinations. But if I register alt+v, then the documentation will be awkward.
So my question boils down to whether one of the following is possible:
knowing which key actually was pressed (meaning, knowing that ה was pressed together with alt and not v)
mapping between the hebrew characters (or any non-english) to their physical english counterparts, so when my function receives alt+ה it will convert it to alt+v for the callback lookup.
Of course I want something generic, that will work for any language, not list just the hebrew alphabet.
You should not care if it is alt-ה or alt-v, you want to perform the same operation on both cases.
If it is not identified, it is not identified anywhere, so your function will get alt-v as well.
if your function gets something ("Alt", "ה") you should create an object for conversion.
var conv= { 'ה': 'v'; 'ש': 'a',...}
Hard to define the title ^^
I want to have to input fields. For example: one where you type in a color (string) and another for the code of the color (varchar).
Like this: |Green| |#657EC9| (just random color-code)
I do not want to learn how to find the color-code but how to match a value or variable with another. It was just an example.
What i wanna know is how I in the best way auto generate one of the fields when I fill in the second. When I type 'green' in the first field I want the code to automatically appear in the second and vice versa. I just want to do it for a few colors.
I am very new to PHP, HTML and Javascript and could need some good advice about how I should handle the problem.
Thank you
I would tend to just map values to an object literal, so:
var colors = {
Green:'#657EC9',
Red:'#00ffff'
}
Now you could get your value with colors[fieldInputVal] where fieldInputVal might be 'Green' or 'Red' although of course you'd have to test if there actually was a property there. Object literals are the main reason I rarely find a use for switch statements in JS.
As for the event JS, I'm going to be lazy and go with JQuery rather than explain attachEvent vs. addEventListener which would be necessary if you're supporting IE8 or below. If you want to normalize for that yourself and skip JQuery, look up 'addEvent contest' on quirksmode.org
$('.input_one').change( function(){
//note: only fires after the field loses focus - you tab out or focus another field
var inputVal = $(this).val();
if(colors[inputVal] !== undefined){
$('.input_two').val(colors[inputVal]);
}
} );
note: I did not test this code for syntax goofs.
If you want to be more flexible and accept 'green' or 'Green', I would just capitalize the first character before you use it for the lookup. To do the lookup on every character add, you'd have to look up the keyup or keydown events (I prefer keyup to avoid breaking the browsers back when somebody holds a key down).
I have an example of what I have got so far here (example 1), you'll need to click on the 'result' window so the keys will move the character (w, a, s and d keys move the character), also bear in mind that this has not been browser tested and only works in a select few modern browsers.
I can now get the image to move up/down/left/right as wanted and depending on the 'health' it moves a particular speed, and using a good example I found it rotates along with the mouse too, so it works in a birds eye view styled game.
Now, I'm a little confused about how I can get the image to move diagonally, I've tried using multiple if statements linking the possible combinations of keys, but it always takes the last key pressed.
I don't really know how to tackle the problem, do I need to put them in some sort of while loop to say while a certain key is pressed move it in that direction? Would that eliminate the need for the diagonal/multiple key press?
if ((key == key_W && key == key_D) || (key == key_w && key == key_d) || (key == key_W && key == key_d) || (key == key_w && key == key_D)) {
// Player Up/Right
}
Or do I need to set some sort of array to generate a list of keys pressed?
I understand and I'm fully aware making games in Javascript/jQuery isn't the best method to make games, it's an experiment more than anything.
EDIT
There is now have a more workable, moving character here (example 2), but there is a delay in the movement, so to expand on my question, is there anyway to reduce this?
Well this looks like a fun project so it got me curious and I started to look around. I found an article on Quirksmode that talks about using keycode vs character code. I see that you are detecting both upper and lower case letters. The following blurb seems to indicate that this is unnecessary. This article also has important docs on browser compatibility and special key compatibility between browsers and systems. For instance, the command button on a Mac keyboard. What is it? How is it detected and behaves in various browsers?
for instance, a lower case 'a' and an upper case 'A' have the same
keyCode, because the user presses the same key, but a different
charCode because the resulting character is different.
http://www.quirksmode.org/js/keys.html
So then the question becomes, how do you detect multiple key presses. I found this SO answer on it that is remarkably simple and straightforward.
Can jQuery .keypress() detect more than one key at the same time?
var keys = {};
$(document).keydown(function (e) {
keys[e.which] = true;
});
$(document).keyup(function (e) {
delete keys[e.which];
})
Update
Basically I just brought in the code from above, deleted your diagonal code and iterated over the keys array for all movement operations.
http://jsfiddle.net/mrtsherman/8NW2K/3/
Jwerty is a great library which handles this sort of thing, i suggest you check it out:
https://keithamus.github.io/jwerty/
It's compatible with jQuery too!