Custom keyboard view for typing secure passwords using HTML and CSS
When people use someone else’s computer and try to log in to their account on any website, they are afraid that the other person might have installed a Keylogging software that tracks all the keys pressed, and hence they will know his password. But if you show a custom keyboard view for a password field on your website, it will create a whole new level of confidence in users towards your website.
So let’s learn how you can do this.
This is what we are going to create:
First, you need to create a password field, you probably also have a username or email field as well.
<input type="password" name="password" id="password">
Then create a table with a full keyboard view.
Numeric keyboard:
First, we will create a full numeric keyboard that appears on top of most laptops.
<table class="keyboard">
<tr>
<td>
~<br><span data-shift="~" data-initial="`">`</span>
</td>
<td>
!<br><span data-shift="!" data-initial="1">1</span>
</td>
<td>
@<br><span data-shift="@" data-initial="2">2</span>
</td>
<td>
#<br><span data-shift="#" data-initial="3">3</span>
</td>
<td>
$<br><span data-shift="$" data-initial="4">4</span>
</td>
<td>
%<br><span data-shift="%" data-initial="5">5</span>
</td>
<td>
^<br><span data-shift="^" data-initial="6">6</span>
</td>
<td>
&<br><span data-shift="&" data-initial="7">7</span>
</td>
<td>
*<br><span data-shift="*" data-initial="8">8</span>
</td>
<td>
(<br><span data-shift="(" data-initial="9">9</span>
</td>
<td>
)<br><span data-shift=")" data-initial="0">0</span>
</td>
<td>
_<br><span data-shift="_" data-initial="-">-</span>
</td>
<td>
+<br><span data-shift="+" data-initial="=">=</span>
</td>
<td><span>delete</span></td>
</tr>
</table>
We have written the normal key in the <span> tag and the shift key directly in <td>. Also, we have given data-shift and data-initial attribute so we can know which character to use when the shift key is pressed and which character to use when the shift key is released.
1st row (QWERTY):
This will be the very first row on your keyboard. You can compare it with your keyboard. Create a new <tr> tag in your table:
<tr>
<td></td>
<td data-shift="Q"><span>q</span></td>
<td data-shift="W"><span>w</span></td>
<td data-shift="E"><span>e</span></td>
<td data-shift="R"><span>r</span></td>
<td data-shift="T"><span>t</span></td>
<td data-shift="Y"><span>y</span></td>
<td data-shift="U"><span>u</span></td>
<td data-shift="I"><span>i</span></td>
<td data-shift="O"><span>o</span></td>
<td data-shift="P"><span>p</span></td>
<td>
{<br><span data-shift="{" data-initial="[">[</span>
</td>
<td>
}<br><span data-shift="}" data-initial="]">]</span>
</td>
<td>
|<br><span data-shift="|" data-initial="\">\</span>
</td>
</tr>
It also has data-shift and data-initial attributes that tell that the character will be uppercase when the shift key is pressed, and lowercase when the shift key is released.
2nd row (ASDF):
Similarly, we are going to create a second row of the keyboard.
<tr>
<td></td>
<td data-shift="A"><span>a</span></td>
<td data-shift="S"><span>s</span></td>
<td data-shift="D"><span>d</span></td>
<td data-shift="F"><span>f</span></td>
<td data-shift="G"><span>g</span></td>
<td data-shift="H"><span>h</span></td>
<td data-shift="J"><span>j</span></td>
<td data-shift="K"><span>k</span></td>
<td data-shift="L"><span>l</span></td>
<td>
:<br><span data-shift=":" data-initial=";">;</span>
</td>
<td>
"<br><span data-shift='"' data-initial="'">'</span>
</td>
</tr>
3rd row:
This will be the last row of the keyboard, usually right above the space bar.
<tr>
<td id="key-shift"><span>shift</span></td>
<td data-shift="Z"><span>z</span></td>
<td data-shift="X"><span>x</span></td>
<td data-shift="C"><span>c</span></td>
<td data-shift="V"><span>v</span></td>
<td data-shift="B"><span>b</span></td>
<td data-shift="N"><span>n</span></td>
<td data-shift="M"><span>m</span></td>
<td>
<<br><span data-shift="<" data-initial=",">,</span>
</td>
<td>
><br><span data-shift=">" data-initial=".">.</span>
</td>
<td>
?<br><span data-shift="?" data-initial="/">/</span>
</td>
</tr>
Note that it has an ID attribute to the shift key, that is so we can highlight the shift key when it is pressed.
Applying styles
To make the keyboard view looks nice, we are going to apply some styles. But you can style the keyboard as you want.
.keyboard {
margin-top: 10px;
table-layout: fixed;
width: 200px;
}
.keyboard,
.keyboard td {
border: 1px solid black;
border-collapse: collapse;
}
.keyboard td {
padding: 25px;
cursor: pointer;
width: 30px;
overflow: hidden;
}
.keyboard td:hover,
.keyboard td.active {
background: black;
color: white;
}
This will make your keyboard look nice and readable.
Javascript
The real power of this keyboard view comes with Javascript. Following is the complete Javascript code that will make this static keyboard view functional.
var isShift = false;
window.addEventListener("load", function () {
var tds = document.querySelectorAll(".keyboard td");
for (var a = 0; a < tds.length; a++) {
tds[a].addEventListener("click", function () {
/* get key node */
var node = this.querySelector("span");
if (node == null) {
return;
}
if (node.innerHTML == "delete") {
simulateBackspace(document.getElementById("password"));
} else if (node.innerHTML == "shift") {
/* toggle the isShift variable */
isShift = !isShift;
toggleShift();
} else {
/* check if it is an alphabet */
if ((/[a-zA-Z]/).test(node.innerHTML)) {
document.getElementById("password").value += node.innerHTML;
} else {
/* show initial value if the shift is off.
* show shift value if shift is on. */
if (isShift) {
document.getElementById("password").value += node.getAttribute("data-shift");
} else {
document.getElementById("password").value += node.getAttribute("data-initial");
}
}
if (isShift) {
isShift = false;
toggleShift();
}
}
});
}
});
function toggleShift() {
/* make all alphabets capital or small based on new isShift value */
var keys = document.querySelectorAll(".keyboard span");
for (var b = 0; b < keys.length; b++) {
/* keys must not be shift or delete */
if (keys[b].innerHTML != "shift" && keys[b].innerHTML != "delete" && keys[b].innerHTML != "") {
/* check if it is an alphabet */
if ((/[a-zA-Z]/).test(keys[b].innerHTML)) {
if (isShift) {
keys[b].innerHTML = keys[b].innerHTML.toUpperCase();
} else {
keys[b].innerHTML = keys[b].innerHTML.toLowerCase();
}
}
}
}
/* highlight the shift button if on. */
if (isShift) {
document.getElementById("key-shift").className = "active";
} else {
document.getElementById("key-shift").className = "";
}
}
function simulateBackspace(element) {
var start = element.selectionStart, end = element.selectionEnd, event;
if (!element.setRangeText) { return; }
if (start >= end) {
if (start <= 0 || !element.setSelectionRange) { return; }
element.setSelectionRange(start - 1, start);
}
element.setRangeText("");
event = document.createEvent("HTMLEvents");
event.initEvent("input", true, false);
element.dispatchEvent(event);
}
That’s how you can create a fully functional custom numeric keyboard view. Comments have been added with each line for an explanation. You can customize this as much as you want. If you face any problems feel free to ask in the comment section below.
[wpdm_package id=’1173′]
