showing divs using keyboard commands - javascript

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.

Related

Focus an element of a list (search result) while continue writing in an input

I have a custom searcher in my React js app, and I need to focus an element of the search results (so I can navigate with arrow keys) leaving the input focused as well so I can continue writing.
thanks
I recommend you to simulate what you want. Add keydown event listeners to input. And then see what is pressed. If it is allowed symbol then add this symbol to inputs actual value. If it is arrow, then add a specific class to need search item (f.e. focused-search-item) and add little another style rules. And when you press enter then get the "focused" element and simulate click event on it

Row Click Event in vaadin-grid polymer

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());

How to release keys in webdriverIO

The webdriverIO docs say that the browser.keys command works like the sendKeys command, but it doesn't implicitly release the keys.
http://webdriver.io/api/protocol/keys.html
How are the keys released?
I tried writing code to navigate backwards through a form using the keyboard:
browser.keys(['Shift', 'Tab']);
But in the next input box it types into, the text is capitalized. It's like the shift key is still held down.
I think I figured it out. I just had to send the key twice like this
browser.keys(['Shift', 'Tab', 'Tab', 'Shift']);
I think webdriver must treat the first Shift like a keydown, and the second Shift like a key up.
So the sequence above would be the full keysDown/keysUp sequence to do a backwards form navigation using the keyboard.
Why do you not use .click for clicking on the form you want? It´s much easier to work with css selector than simulating key press.
Alternative you can also do stuff like this
.click('a[href*="contact"]')
Works also with placeholder and other stuff if you can´t find an unique id or class.
// .moveToObject(selector,xoffset,yoffset);
.moveToObject('#button', 0, -103)
.buttonDown()
.moveToObject('#button', 0, -104)
.buttonUp()
However this is what I use to press down mouse button and then release it, if you have no chance to find the right css selector to click on. You can make rightclick of webdriver io to see at which position you at and then you can create this workaround click anywhere without css selector.

Simple Ember.js Test Methods

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

Capture click and keystroke events in Javascript, override default behavior?

I've written some JavaScript code using jQuery that listens for the user to click the mouse on different parts of my page with and without holding down the shift key.
I have a table on my page. The idea is that the user can select rows in the table by clicking on them. The user can select multiple rows by clicking one row, holding down shift, and clicking another row. (This is how the user expects to select multiple rows, but holding down the shift key, right?)
Anyways, my code works in Internet Explorer, but I have a problem. My code reads the users selection, but the browser simultaneously highlights the text between the two mouse click locations.
How can I make it so that my code can select the rows based on the user clicks and the browser doesn't select the text?
Update I tried the following code:
$('tr').bind('mousedown',function() { return false; } );
With this code in my page, when I click one row, hold down shift and click another row, the text between the two rows is highlighted. This is what I'm trying to suppress. Please note that the text highlights before I release the mouse button.
Update #2 I tried the following code:
$('tr').bind('mousedown',function(e) {
e.preventDefault();
return false;
});
Unfortunately, this doesn't seem to do anything at all.
It's the mousedown event you want to suppress.
Have a look at event.stopPropogation() and event.preventDefault().
The return value of an event handler is ignored by specification (jQuery might to additional stuff).
You may be looking for preventDefault and returnValue (this latter one was invented precisely because the return value of a handler is ignored).
You may also want to look into the CSS3 property extension -moz-user-select: none.
Try this
$(function(){
$("tableSelector").bind('selectstart mousedown',function () {
return false;
});
});

Categories

Resources