I have a requirement where a user selects a row(or a cell, for that matter) and presses some key(such as Enter, this is configurable) and I need to take some action based on the key pressed (such as opening a dialog with detailed information about the row).
As I was looking in the code, I stumbled upon a key event handler in vaadin-grid-keyboard-navigation-mixin.html . But the _onKeyDown method handles only some specific keys. And I am not sure how to pass a callback to that function.
Any ideas regarding how this can be done. I just want to attach an key event handler to each cell, that capture the key event(again this is not fixed), and execute appropriate method.
I hope that I have been able to convey my intentions.
Thanks
Your class has to implement KeyNotifier, then you can add a keyPressListener i.e. :
addKeyPressListener(Key.ARROW_DOWN, event -> anAwesomeFuncion());
Related
I'm reading through this section of the guide. I'm testing the complex component in the tutorial.
What I'm not understanding is why these two lines exist together, I believe only the first one should.
fillIn('.list-filter input', 'Seattle');
keyEvent('.list-filter input', 'keyup', 69);
In the first line, we fill in the input field which should automatically trigger a filtering of the results. Why are we adding an extra e to the field (keycode 69)? It's like we're going to search Seattlee (note the two e's at the end). Is the keyEvent method necessary to activate the triggering of the refresh but it actually doesn't print to the input field?
I suppose the keyup event doesn't enter a char. It simply does for its name stands for: fires the key up event. You can press a char on the keyboard and see, that the char is being added before you release the key. I'm sure this is specified somewhere, but I don't know this. My reason is the common sense.
So in order to trigger some functionality in that example, one needs not only to fill the field, but to fire a specific event, to which a js-handler is bound
So I have a simple dropdown in my code that I attach a click hander to, like so (code is technically typescript)
this.highElement.click(() => {
console.log(event);
});
This event is triggered both when I click the select box AND when I click one of the options (Here's a Js fiddle that demonstrates what I mean https://jsfiddle.net/Kolichikov/zmdL6q2d/). What I would like ideally is for the event to only fire when I click the select box itself, not the resulting list of items.
I tried setting a delegated event for the option this.highElement.on("click", "option", () => { console.log("option!"); });, but that didn't work.
I have noticed that the MouseEvent properties are different (the mouse coordinates aren't populated when an item is clicked), but this seems like a browser implementation that could change (maybe?).
Is there a way to properly differentiate between the two events?
I'll give you 2 options, you pick the one it's best for you:
First you can differentiate between the 2 events like this:
$("#selectItem").click(function(event){
if (event.target.id == 'selectItem')
console.log(event)
});
the event has a different target when it returns from clicking in select and from choosing an option.
But I think it would be much clearer if you used the change event
$("#selectItem").change(function(event){
console.log(event)
});
it fires only when you select an item. Depending on what you need this could be better.
EDIT
Checkingwhat #libzz said, I notice that the first part of the above response is wrong. I didn't edit it because the OP accepted the answer as is and I'd be changing the code that lead to his decision.
But as #libzz said, the event when fired has always the same id.
What I also noticed now is that the click event only fires when an option is clicked, not when the select box is clicked. That levels the onclick with the onchange event. They basically do the same thing in this case.
So in order to make code clearer, the best would be using only onchange event for selects.
I have an event handler that is executed when an option in a selectbox is clicked.
$('#my-select').live('change', function(evt) {
....
});
Is there a way to pass the status of the Ctrl-key (pressed/not pressed) into the event handler ? evt does not contain this information because all key related attributes are undefined.
change event and the keys used to enter the value
The change event is not something that has keys associated. Please read jQuery's .change() documentation:
The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
The example is this:
You have some input field.
You enter "some name" text into the field.
Before going to some other field, you decide to change it to "some test", eg. by hitting backspace couple times, then you navigate to next field (eg. by using Tab key, or by tapping Next on iOS keyboard etc.),
The onchange event handler is fired, when you navigate to other field (or rather, as soon as the field loses focus), so the information about all keys used to enter value are pretty unrelated.
Solution using keypress event
To solve that problem, you would need to implement your solution using keypress event, eg. thanks to jQuery's .keypress() function. In such case, event object's ctrlKey attribute (listed eg. here) lets you know about the status of the Ctrl key. Example usage is here: https://stackoverflow.com/a/4604093/548696
Demo for saving keys on keypress/keydown/keyup and reading on change
It is available here:
http://jsfiddle.net/tadeck/vPu94/
The demo clears the recorded keys on focus, saves them on every keypress event (you can easily edit that and test different cases) and reads them (and outputs on the screen) whenever change event is fired (so when the changed field leaves focus).
is it possible to show/hid a div on a webpage if say three keys are pressed in the correct order on a normal keyboard....
Im trying to hide my login div in drupal and only want it to show if I press say three keys on the keyboard. Dosnt matter if it shows up in source.
any thoughts/links?
cheers
You can try js-hotkeys.
jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination.
Example: Binding 'Ctrl+c'
$(document).bind('keydown', 'ctrl+c', fn);
Next step is to show/hide your div in the function you pass in.
You have to intercept the keypress event (or keyup) and then check which key was pressed (see jQuery Event Keypress: Which key was pressed?)
To handle a key sequence you have to store the pressed key codes into an array and then check it against your defined sequence.
This "cheat code" jQuery plugin should make what you're asking especially simple.
If you poll for key presses and store them in array then match that with the correct array once this happens show the div then clear your stored array. Close the div and start the process again.
I have 3 buttons <input type="submit" name="submitButton" value="something">. Then i check the event with $(".form_name").submit(function(e) { and i would like to check which of the 3 buttons have been clicked and to alert the user of the action and return false if the user wishes to not go through with the action.
How do i check which of these buttons have been clicked?
event.target might help. Another workaround is to have the three buttons fire events, and make their event handler do the submission. In that sense there is no guesswork.
—
Personally I would first make sure that the three buttons have identifiers, plausibly tucked within with $(element).data lines, or custom HTML attributes (oh, don’t use special classes!), and have the event handler check $(event.target).data(key) or $(event.target).attr(key) to find out more information related to the caller. I would then map the form’s submit event also to this handler, so everything is processed from one place.
The Event interface gives information about the event. Look at this answer to know where you can find this object.
The target or scrElement of the object is the attribute you're looking for. See Quirksmode.org.
EDIT: you asked for a jQuery specific answer. You can just use event.target (in your case e.target), jQuery fixes this when necessary.