In Today's Article I am demonstrating how to add console Shortcuts to your site, and make it less demanding for guests to explore your site.
We are going to take a gander at making something many refer to as mousetrap, with mousetrap assign keys like Shift, Ctrl, Alt, Options, and Command to perform specific capacities in your site. It likewise functions admirably crosswise over more seasoned programs.
Let’s Begin!
Initially you should create a new HTML document with your content and link the mousetrap library. For the mousetrap feature to work efficiently I recommend running it in CDNj’s through the cloudflare network as it’s a lot quicker than running it through your own web server.
<script src="//cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
It is time to use mousetrap bind technique in order to attach keyboard keys with functionaliy. You may assign a single key, a key combination, or sequence keys, for instance:
- Single Key:
In this example, we bind the Shift:
Mousetrap.bind('s', function(e) { // your function here... });
Combination Key
In this example, we bind the Ctrl and Shift. You will need to press the two together to perform the designated function.
Mousetrap.bind('ctrl+s', function(e) {
// your function here...
});
Sequence Key
In this example, user will need to press G and then s subsequently. If you are developing web-based game this might be useful for adding a secret hidden key combo.
Mousetrap.bind('g s', function(e) {
// your function here...
});
Using Mousetrap
We will build a simple web page with a couple of keyboard shortcuts that enable users to access some functionality on the website. We will be using jQuery to make it easier to manipulate the HTML document and select HTML elements.
& lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
& lt;script src="//cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
Now let’s put in to practice some of what we just learnt:
We are going to bind a key that will allow user to focus on the search input field quickly.
The following is the HTML markup for the search along with the id.
Hi. I’m Designer of F@stest Vpn. I’m CEO/Founder of Technocrat. I’m a Programmer, Web Designer,Engineer,System Analyst,Crypt Networking Admin,Web Developer, Business Enthusiast,Networking Marketer,Apps Developer." No answer has ever been made without a querry"
Blogger Comment
Facebook Comment