Introduction
In my previous articles I told you about:
- How to use IF and Ifnot Binding in Knockout.
- How to use Mouseover and Mouseout Binding in Knockout.
This article will help you to determine which keyboard modifier key is pressed. It can be either the Shift Key, Ctrl Key or Alt Key.
Step 1
First of all you need to add an external Knockout js file into your application, you can either download it from the internet or can download my application available at the start of this article in Zip Format and then can use the file attached with this Zip file.
After downloading the file you need to call it in the head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Step 2
Now we can work on our application. First we will work on the ViewModel. To do that you need to add a Script tag under the Body Section and then need add this code in it:
<script type="text/javascript">
function x() {
this.hello = function (data, event) {
var click = "";
if (event.shiftKey) {
click = "You Clicked With Shift Key ";
}
if (event.altKey) {
click = "You Clicked With Alt Key ";
}
if (event.ctrlKey) {
click = "You Clicked With Ctrl Key";
}
this.click(click);
},
this.click = ko.observable();
}
ko.applyBindings(new x());
</script>
As usual I first created a function named "x()". In that function I created a function named "hello".
This function contains a variable named click that will remain empty at the start. Then three events are used, one for the Shift Key, the second for the Alt Key and the third for the Ctrl Key.
If you want to use the events of Keyboard Modifier then you can do this using "event.ModifierKey", the modifier keys are special keys like Shift, Alt and Ctrl.
When the user clicks on these keys they provide a separate message for each Modifier Key.
Step 3
Until now our work on the ViewModel is completed, so we can work on the view of our application.
Write this code in the view of your application.
<div>
<button data-bind="click: hello">Click Me</button>
<div data-bind="text: click"></div>
</div>
Here the button is bound to the "hello", and the Div is bound to the click, so when the user clicks on the button by pressing shift or alt or ctrl then the user will get an output message that will tell him that he has pressed a modifier key while clicking the button.
The complete code of my application is as follows:
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button data-bind="click: hello">Click Me</button>
<div data-bind="text: click"></div>
</div>
<script type="text/javascript">
function x() {
this.hello = function (data, event) {
var click = "";
if (event.shiftKey) {
click = "You Clicked With Shift Key ";
}
if (event.altKey) {
click = "You Clicked With Alt Key ";
}
if (event.ctrlKey) {
click = "You Clicked With Ctrl Key";
}
this.click(click);
},
this.click = ko.observable();
}
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Now you can run your application
Output
On running the application you will get output like this:
![modifier key knockout1.jpg]()
But when you will click on the button while pressing the Modifier button then you will get output like this:
![modifier key knockout5.jpg]()