Link to code:
Google Material Icons:
https://google.github.io/material-design-icons/#icon-font-for-the-web
In this video we’ll be creating a virtual keyboard using pure HTML, CSS & JavaScript (no libraries required). This is done from scratch and is easy to integrate, responsive and touch-friendly.
I think projects like this are super helpful for learning web development or specifically HTML, CSS, & JavaScript. You don’t always need a library or framework to create good looking UI components.
Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!
Follow me on Twitter @dcode!
If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!
#dcode #webdev #javascript
Original source
22 responses to “Virtual Keyboard in JavaScript – HTML, CSS & JavaScript Tutorial (Project Video)”
Please tell how to add custom keys.
Thanks amazing for the tutorial…
Love the tutorial but it doesnt seem to work on IE. how can i do that?
Helpful video thanks
Thanks for this great work! I would like to start with 1 uppercase letter. Then the letters should switch to lowercase automatically. After a space they should switch to uppercase again. How do I have to edit the code for this functionality?
Can you put left and right arrow keys?
Thank you for your presentation. I tried to repeat everything what you have done in Dreamweaver, but code was not working. Then, I copied your code, but the result was similar with the following errors:
1. _triggerEvent(handlerName) {
if (typeof this.eventHandlers[handlerName] == "function") {
this.eventHandlers[handlerName](this.properties.value);
}
},
asking to insert === instead of ==
2. close() {
this.properties.value = "";
this.eventHandlers.oninput = oninput;
this.eventHandlers.onclose = onclose;
this.elements.main.classList.add("keyboard–hidden");
}
};
it says that oninput and onclose are not defined.
3. And also, it forces me to add the following at the beginning:
/*jshint esversion: 6 */
/*jslint node: true */
"use strict";
If anybody was able to use it and to have this beautiful keyboard, just explain, how you solved all these?
wow…!!!!!!!!!!!!!!!!
Thank you so much,is there a way i can enable virtual keyboard on my webview in javafx?
Hi, you have my subscription 🙂
Impressive
Very clear and sharp, in coding, explaining and JS knowledge. Bravo, sir and many thanks ! Will do it in "azerty" mode, since I'm French.
Thanks for this wonderful tutorial.
simply mind blowing!!! great tutorial. how do you plan these kinda programs? what kind of methods to add and how they would work and all these stuff.. can you give some tips to how to plan these things before coding? Thanks
What is the name of this theme that you use in vscode?
Thank u for this awesome video
Very nice vid sir, makeme vibrato from ny haert
Nice!
like
It can be a good idea for an electron app
Nice video! 👍👍👍
Awesome!