Detect multiple key press in javascript for your website


Many a times we end up in situations where in our clients are windows app migrants to web. And they could not let go off the “hotkey” concept. Let’s say “Ctrl + S” or “Alt + R” to perform save or submit operation on a website. The options are endless.

A scalable code that you could use to achieve something in line with this is given below:

//Register the Utility Namespace
var Utility = Utility || {};

/**
* @MethodName : Utility.RegisterKeyPress
* @Description : Register multiple key press events
* @Param {object} ctrl : The control to be clicked when the user press Alt + R
*
* @Example : Utility.RegisterKeyPress('#btnSubmit');
*/
Utility.RegisterKeyPress = function (ctrl) {
    //keyCodes for Alt(18) and r(82)
    var codeset = { 82: false, 18: false };

    //Tracking the Key down & Key up events
    $(document).on('keydown', function (e) {
        if (e.keyCode in codeset) {
            codeset[e.keyCode] = true;
            if (codeset[82] && codeset[18]) {
                //Functionality to be executed on key press - Alt + R
                //An alert here would trigger on each key press
                //Instead define your functionality here
                //Click is an example used here.
                $(ctrl).click();
            }
        }
    }).on('keyup', function (e) {
        if (e.keyCode in codeset) {
            codeset[e.keyCode] = false;
        }
    });
};

//Invoke the above method
//When the user press Alt + R on the page, it will trigger the submit button click
Utility.RegisterKeyPress('#btnSubmit');

You could extend this code to any key press by referring to the javascript keycode chart from here.

Hope this was useful!!

How to disable text selection in a table


When the user drags the mouse over the rows, the row text gets selected, looking a bit awkward. Check the image below:

In order to prevent the user from doing these selections and to keep the rows integrity, we can use the following options:

  • CSS Fix –  works with all browsers except IE
  • Controlling KeyEvents (onselectstart and ondragstart)- works with IE

Check the sample code below to see the implementation of both the approaches:

<html>
<head>
<style type=”text/css”>
.selecting {
-moz-user-select: -moz-none;
-webkit-user-select: none;
user-select: none;

}
</style>
</head>
<body>
<table id=”x” onselectstart=”return false” ondragstart=”return false”>
<tr><td>1</td><td>Indy</td></tr>
<tr><td>1</td><td>Amy</td></tr>
<tr><td>1</td><td>John</td></tr>
<tr><td>1</td><td>Luke</td></tr>
<tr><td>1</td><td>Steve</td></tr>
</table>
</body>
</html>

Well now the user mouse drags won’t work and the page will look neat.